Este generador de clip-path te permite recortar elementos con formas de todo tipo (triángulos, rombos, hexágonos, estrellas, flechas, bocadillos…) sin imágenes ni máscaras. Elige una forma, mira la vista previa y copia el CSS. Funciona en tu navegador, sin registro y en español.
Cómo usar clip-path
- Elige una forma de la cuadrícula.
- Comprueba la vista previa en tiempo real.
- Copia el código y aplícalo a tu elemento con
clip-path.
Qué es clip-path en CSS
La propiedad clip-path recorta un elemento mostrando solo la región que definas, normalmente con la función polygon() y una lista de puntos en porcentajes. El resto se vuelve invisible sin afectar al espacio que ocupa. Es ideal para banners, avatares y secciones con diagonales. Para formas más simples con bordes, prueba nuestro generador de triángulos CSS.
Preguntas frecuentes
¿Necesito el prefijo -webkit-?
En navegadores modernos ya no suele hacer falta, pero añadir -webkit-clip-path mejora la compatibilidad con versiones antiguas de Safari.
¿Puedo animar un clip-path?
Sí, si las dos formas tienen el mismo número de puntos puedes animar la transición entre ellas.
¿Afecta al espacio que ocupa el elemento?
No. El recorte es visual; el elemento sigue ocupando su caja original en el diseño.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
