Generador de CSS Clip Path
Elige entre las formas de clip-path más habituales y copia el CSS al instante, con círculos, polígonos e inset predefinidos.
Preparing private browser tool…
Preguntas frecuentes
- ¿Qué navegadores admiten clip-path?
- La compatibilidad es excelente en todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Los polígonos y las formas básicas se admiten de manera universal. SVG path() está disponible en todos los navegadores modernos.
- ¿Se puede animar clip-path?
- Sí. Las transiciones y animaciones de CSS funcionan siempre que la animación ocurra entre dos formas compatibles (el mismo número de vértices en el caso de los polígonos).
- ¿Cuál es la diferencia entre clip-path y mask?
- clip-path usa formas geométricas (polígonos, círculos). mask usa una imagen o un degradado. Use clip-path para formas nítidas y mask para desvanecidos suaves.
- ¿clip-path afecta el área en la que se puede hacer clic?
- Sí: las regiones recortadas no admiten clics. El elemento sigue ocupando su caja de diseño a efectos de espaciado, pero solo la región visible recibe eventos de puntero.
- ¿Qué formas se incluyen?
- Diecisiete formas predefinidas: triángulo, trapecio, paralelogramo, rombo, pentágono, hexágono, heptágono, octágono, estrella, flecha izquierda y derecha, chevrón, inset, inset redondeado, círculo, elipse y un corazón dibujado con path().
- ¿Se pueden arrastrar los puntos para editar una forma?
- No. Las formas predefinidas son fijas: copie el valor de polygon() y ajuste a mano los pares de porcentajes, manteniendo el mismo número de puntos si piensa animar entre formas.