◇

Generador de clip-path CSS

Recorta un elemento en formas comunes y copia el CSS de clip-path.

Tus archivos se quedan en este dispositivo

Los archivos se procesan en tu navegador, sin subirse a ningún servidor. El sitio descarga el código y los recursos necesarios. Sin cuentas ni rastreadores.

Usa Descargar para guardar esta herramienta como un archivo HTML y usarla sin conexión.

Privacidad →

Forma

salida

Prueba un ejemplo resuelto

Ejemplo

Elige la forma hexágono para obtener clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Cada par es una posición x e y dentro del elemento, así que la forma se estira con el ancho y el alto del elemento.

Ten en cuenta

El recorte oculta parte del elemento pero conserva su caja de maquetación: los vecinos no se mueven y las esquinas ocultas dejan de recibir clics. Los bordes y las sombras de caja también se recortan; si necesitas sombra, aplica un filtro drop-shadow a un contenedor.

Acerca de esta herramienta

Elige una forma y recorta al instante una caja de vista previa con la regla clip-path correspondiente, luego copia el CSS listo para usar. La vista previa se actualiza en vivo, completamente en tu navegador.

Preguntas frecuentes

¿Cómo funcionan los clip-path de polígono?

Cada punto es un par de porcentajes x y relativo a la caja; el navegador los conecta en orden y muestra solo el área dentro del contorno.

¿Todos los navegadores admiten clip-path?

Las formas polígono, círculo, elipse e inset son compatibles con todos los navegadores modernos, así que el CSS generado funciona sin prefijos.