Qué hace clip-path
clip-path recorta un elemento con una forma: lo que queda fuera no se pinta ni recibe clics. Funciona con
cualquier elemento, no solo con imágenes, y no cambia el espacio que ocupa en la página, así que el resto de la
maqueta no se mueve. Es la forma moderna de hacer avatares hexagonales, cabeceras con el borde inclinado o tarjetas
con forma de bocadillo sin exportar ninguna imagen.
Las cuatro formas básicas
circle(50% at 50% 50%): radio y centro. Con un radio del 50 % en una imagen cuadrada sale un círculo perfecto.ellipse(50% 35% at 50% 50%): dos radios, horizontal y vertical.inset(10% round 8%): un rectángulo metido hacia dentro desde cada lado, con esquinas redondeadas opcionales. Útil para recortar márgenes sin tocar la imagen.polygon(…): una lista de puntosx y. Con porcentajes, la forma se adapta a cualquier tamaño.
Animar un clip-path
Dos polígonos con el mismo número de puntos se pueden animar con transition: el navegador
mueve cada punto hacia su pareja. Por eso los efectos de «revelar» suelen partir de un polígono con todos los puntos
juntos en una línea. Si el número de puntos no coincide, el cambio es instantáneo.
Consejos
- Las sombras con
box-shadowse recortan también. Para una sombra con la forma, usafilter: drop-shadow()en un elemento padre. - Para formas con curvas,
clip-path: path()admite un trazado SVG, pero en píxeles fijos; los porcentajes depolygon()son más prácticos en diseños fluidos. - La foto de ejemplo sale de
/random, el banco de fotos del generador de ximg.es, con semilla fija para que siempre sea la misma:https://ximg.es/random/960x640.jpg?seed=ximg-clip.