Cosa fa clip-path
clip-path ritaglia un elemento con una forma: ciò che resta fuori non viene disegnato e non riceve clic.
Funziona con qualsiasi elemento, non solo con le immagini, e non cambia lo spazio che occupa nella pagina, quindi il
resto del layout non si sposta. È il modo moderno per fare avatar esagonali, header con il bordo inclinato o card a
forma di fumetto senza esportare nessuna immagine.
Le quattro forme di base
circle(50% at 50% 50%): raggio e centro. Con un raggio del 50% su un’immagine quadrata ottieni un cerchio perfetto.ellipse(50% 35% at 50% 50%): due raggi, orizzontale e verticale.inset(10% round 8%): un rettangolo rientrato da ogni lato, con angoli arrotondati facoltativi. Utile per tagliare i margini senza toccare l’immagine.polygon(…): un elenco di puntix y. In percentuale, la forma si adatta a qualsiasi dimensione.
Animare un clip-path
Due poligoni con lo stesso numero di punti si possono animare con transition: il browser
sposta ogni punto verso il suo corrispondente. Per questo gli effetti di «rivelazione» partono di solito da un poligono
con tutti i punti schiacciati su una linea. Se il numero di punti non coincide, il cambio è istantaneo.
Consigli
- Anche le ombre di
box-shadowvengono ritagliate. Per un’ombra che segua la forma, usafilter: drop-shadow()su un elemento genitore. - Per le forme curve,
clip-path: path()accetta un tracciato SVG, ma in pixel fissi; le percentuali dipolygon()sono più pratiche nei layout fluidi. - La foto di esempio viene da
/random, l’archivio di foto del generatore di ximg.es, con un seed fisso perché sia sempre la stessa:https://ximg.es/random/960x640.jpg?seed=ximg-clip.