Generador de clip-path CSS

Convierte coordenadas porcentuales en una forma recortada con CSS.

En tu dispositivo · Sin cuenta

Generador de clip-path CSS procesa lo que introduces en este navegador. Los datos introducidos y los resultados se excluyen de las estadísticas de uso. Las herramientas recientes guardan sus nombres, el número de visitas y la fecha y hora de la última visita. Las herramientas guardadas solo almacenan sus nombres. Guardar borradores es opcional y el texto permanece en este dispositivo; puedes eliminarlo con los controles del borrador. Cargar texto desde una URL es opcional y establece una conexión con ese servidor; el servidor puede ver la URL y tu dirección IP. La opción «Usar en» conserva temporalmente los datos en esta pestaña para pasarlos a otra herramienta. La siguiente herramienta los elimina al abrirse y los ignora si ha pasado más de un minuto.

«Copiar enlace» incluye en la dirección los datos que elijas compartir. Cualquiera que tenga el enlace puede volver a abrirlos. Se excluyen los archivos y los resultados generados. Las herramientas de contraseñas y claves solo comparten los ajustes.

Español

Puntos del polígono: x,y en cada línea

Tu resultado

Más

Atajos de teclado

Sobre los enlaces y el reinicio

Los enlaces incluyen los datos que introduces y la configuración. Cualquiera que tenga el enlace puede verlos, así que no incluyas texto privado. Los archivos y los resultados generados no se incluyen; las selecciones aleatorias se repiten.

Al restablecer, la herramienta se recarga con sus valores iniciales y libera los archivos abiertos y los controles de dispositivos. Los borradores guardados permanecen en este dispositivo hasta que los elimines.

Cómo funciona

El generador de clip-path CSS une los puntos en el orden indicado y cierra el polígono. La vista previa muestra el recorte real del navegador y el resultado está listo para incluirlo en una regla CSS.

Siguiente: Generador de triángulos CSS

Ejemplo

Los cuatro puntos predeterminados forman un trapecio: la parte superior ocupa todo el ancho y la inferior va del 25 % al 75 %.

Antes de usar el resultado

Los puntos se expresan como porcentajes del elemento. Si los lados se cruzan, pueden aparecer formas superpuestas; la herramienta conserva el orden en que introduces los puntos.

Citar esta página

Estilo de cita

ToolOctopus. “Generador de clip-path CSS.” Actualizado 7 de octubre de 2026. https://tooloctopus.com/es/generador-de-clip-path-css.

Añade la fecha de consulta si tus instrucciones lo requieren.

Las citas se formatean con citeproc-js, de Frank Bennett, y estilos de Citation Style Language. Licencia y código fuente.