Generador de clip-path

Què fa clip-path

clip-path retalla un element amb una forma: el que queda fora no es pinta ni rep clics. Funciona amb qualsevol element, no només amb imatges, i no canvia l’espai que ocupa a la pàgina, així que la resta de la maqueta no es mou. És la manera moderna de fer avatars hexagonals, capçaleres amb la vora inclinada o targetes en forma de bafarada sense exportar cap imatge.

Les quatre formes bàsiques

• circle(50% at 50% 50%): radi i centre. Amb un radi del 50 % en una imatge quadrada surt un cercle perfecte.
• ellipse(50% 35% at 50% 50%): dos radis, horitzontal i vertical.
• inset(10% round 8%): un rectangle ficat cap endins des de cada costat, amb cantonades arrodonides opcionals. Útil per retallar marges sense tocar la imatge.
• polygon(…): una llista de punts x y. Amb percentatges, la forma s’adapta a qualsevol mida.

Animar un clip-path

Dos polígons amb el mateix nombre de punts es poden animar amb transition: el navegador mou cada punt cap a la seva parella. Per això els efectes de «revelar» solen partir d’un polígon amb tots els punts junts en una línia. Si el nombre de punts no coincideix, el canvi és instantani.

Consells

• Les ombres amb box-shadow també es retallen. Per a una ombra amb la forma, fes servir filter: drop-shadow() en un element pare.
• Per a formes amb corbes, clip-path: path() admet un traçat SVG, però en píxels fixos; els percentatges de polygon() són més pràctics en dissenys fluids.
• La foto d’exemple surt de /random, el banc de fotos del generador d’ximg.es, amb una llavor fixa perquè sempre sigui la mateixa: https://ximg.es/random/960x640.jpg?seed=ximg-clip.