Generador de CSS Clip-path
El generador de clip-path CSS crea valores clip-path para formas comunes (triángulo, flecha, pentágono, hexágono, estrella, chevron, círculo, elipse e inset redondeado) con vista previa en vivo.
Acerca de esta herramienta
El generador de clip-path CSS crea valores clip-path para formas comunes (triángulo, flecha, pentágono, hexágono, estrella, chevron, círculo, elipse e inset redondeado) con vista previa en vivo.
Cómo se usa
- Elige una forma de la lista.
- Selecciona un color de relleno para la vista previa.
- Haz clic en Copiar CSS y aplica el clip-path a cualquier elemento o imagen.
Datos útiles
- clip-path oculta todo lo que queda fuera de la forma, así que no necesitas una máscara de imagen ni un archivo SVG.
- polygon() recibe una lista de puntos x y en porcentajes, que se adaptan al tamaño del elemento.
- circle(50% at 50% 50%) recorta un elemento en un círculo centrado.
- inset() con round añade esquinas redondeadas a un recorte rectangular.
- Las formas básicas de clip-path son compatibles con todos los navegadores principales actuales.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo recorto una imagen con una forma usando CSS?
Aplica un clip-path a la imagen, por ejemplo clip-path: polygon(50% 0%, 0% 100%, 100% 100%); para un triángulo.
¿Qué diferencia hay entre clip-path y mask?
clip-path recorta una forma vectorial de bordes nítidos. mask usa una imagen o un degradado y puede crear bordes suaves y parcialmente transparentes.
¿Se puede animar clip-path?
Sí, si ambas formas usan la misma función y el mismo número de puntos, el navegador puede hacer la transición entre ellas.
¿clip-path afecta a los clics?
Sí. Las zonas fuera de la forma recortada no se renderizan y no reciben eventos del puntero.