Genera clip-path CSS para inset, círculo, elipse y polígonos con vista previa
Preset
Vista previa
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Consejo: combiná clip-path con transition: clip-path 0.3s ease para animaciones suaves al hover.
También podrías necesitar
La propiedad CSS clip-path recorta el área visible de un elemento usando una forma geométrica: todo lo que queda fuera de la forma se oculta, sin modificar el layout ni el espacio que ocupa el elemento. Es una de las propiedades más creativas del CSS moderno, usada para crear secciones diagonales, headers con formas, imágenes recortadas, íconos personalizados y efectos visuales que antes requerían imágenes PNG con fondo transparente. clip-path acepta cinco funciones de forma: inset() para rectángulos con redondeo opcional, circle() y ellipse() para formas circulares, polygon() para cualquier polígono con puntos en porcentaje, y path() para formas SVG arbitrarias. Esta herramienta cubre los cuatro primeros — los más usados en la práctica. Los valores en porcentaje son relativos al bounding box del elemento, lo que hace que las formas sean responsive por defecto: funcionan igual para un div pequeño que para uno que ocupa todo el ancho de pantalla. La propiedad es animable con CSS transitions, permitiendo efectos de hover donde un elemento 'se recorta' suavemente.
¿Qué diferencia hay entre clip-path y overflow: hidden?
overflow: hidden recorta el contenido al rectángulo del elemento — solo permite cortes rectos en los bordes. clip-path define una forma arbitraria (círculo, polígono, etc.) que puede extenderse más allá de los bordes del elemento o dejar partes del interior ocultas. Otra diferencia clave: los elementos con clip-path no capturan eventos de mouse en las áreas recortadas — pointer-events sigue la forma del clip. Con overflow: hidden, todos los eventos se capturan en el rectángulo original. Además, clip-path es animable mientras overflow no lo es.
¿Los porcentajes son relativos a qué?
Los porcentajes en clip-path son relativos al bounding box del elemento (su width y height incluyendo padding pero sin margin ni border). 0% 0% es la esquina superior izquierda, 100% 100% es la inferior derecha, y 50% 50% es el centro exacto. Esto hace que las formas sean automáticamente responsive: un polygon(50% 0%, 0% 100%, 100% 100%) crea siempre un triángulo perfecto sin importar el tamaño del elemento. Los valores pueden superar el 100% o ser negativos para extender la forma fuera del bounding box.
¿Necesito el prefijo -webkit-clip-path?
Hoy el soporte de clip-path sin prefijo es del 95%+ en navegadores modernos (Chrome, Firefox, Edge, Safari 13.1+). El prefijo -webkit-clip-path sigue siendo relevante para Safari 11-13 y algunos navegadores móviles antiguos. Para proyectos que necesiten máxima compatibilidad, incluir ambas declaraciones (el CSS generado ya las incluye) es la práctica recomendada. Para proyectos modernos enfocados en Chrome/Firefox, el prefijo es innecesario pero inofensivo.
¿Cómo animo una forma con clip-path?
Agregá transition: clip-path 0.3s ease al elemento y cambiá el valor de clip-path en :hover o con JavaScript. El navegador interpolará entre las dos formas automáticamente — siempre que ambas formas sean del mismo tipo (polygon con polygon, circle con circle) y tengan el mismo número de puntos en el caso de polygon. Si necesitás animar entre formas con diferente número de puntos, necesitás deformar uno de los polígonos para que tenga el mismo número de vértices. Para polígonos, podés agregar puntos 'fantasma' que colocás en la misma posición para compensar.
¿Por qué mi forma clip-path no funciona en Safari?
Safari es el navegador con más restricciones en clip-path. Los problemas más comunes: 1) olvidar el prefijo -webkit- (necesario en Safari < 14), 2) usar clip-path en elementos con transform — Safari a veces tiene bugs con la combinación; try adding transform: translateZ(0) como workaround, 3) usar clip-path en elementos position: fixed puede tener comportamientos inesperados. Para SVG filters y máscaras complejas, a veces es mejor usar mask-image como alternativa en Safari. Siempre probá en Safari durante el desarrollo.