Xerador de clip-path

Que fai clip-path

clip-path recorta un elemento cunha forma: o que queda fóra non se pinta nin recibe clics. Funciona con calquera elemento, non só con imaxes, e non cambia o espazo que ocupa na páxina, así que o resto da maqueta non se move. É a forma moderna de facer avatares hexagonais, cabeceiras co bordo inclinado ou tarxetas con forma de bocadillo sen exportar ningunha imaxe.

As catro formas básicas

• circle(50% at 50% 50%): raio e centro. Cun raio do 50 % nunha imaxe cadrada sae un círculo perfecto.
• ellipse(50% 35% at 50% 50%): dous raios, horizontal e vertical.
• inset(10% round 8%): un rectángulo metido cara a dentro desde cada lado, con esquinas arredondadas opcionais. Útil para recortar marxes sen tocar a imaxe.
• polygon(…): unha lista de puntos x y. Con porcentaxes, a forma adáptase a calquera tamaño.

Animar un clip-path

Dous polígonos co mesmo número de puntos pódense animar con transition: o navegador move cada punto cara á súa parella. Por iso os efectos de «revelar» adoitan partir dun polígono con todos os puntos xuntos nunha liña. Se o número de puntos non coincide, o cambio é instantáneo.

Consellos

• As sombras con box-shadow recórtanse tamén. Para unha sombra coa forma, usa filter: drop-shadow() nun elemento pai.
• Para formas con curvas, clip-path: path() admite un trazado SVG, pero en píxeles fixos; as porcentaxes de polygon() son máis prácticas en deseños fluídos.
• A foto de exemplo sae de /random, o banco de fotos do xerador de ximg.es, cunha semente fixa para que sempre sexa a mesma: https://ximg.es/random/960x640.jpg?seed=ximg-clip.