CSS Clip-Path: Come Creare Forme Non-Rettangolari in CSS

La proprietà CSS clip-path ritaglia gli elementi secondo una forma geometrica, rivelando solo la parte dell'elemento all'interno della forma. È uno degli strumenti più potenti per creare layout visivamente interessanti senza immagini aggiuntive — sezioni diagonali, forme esagonali, maschere foto personalizzate.

Funzioni Clip-Path

• circle(radius at cx cy): Ritaglia in cerchio. clip-path: circle(50% at 50% 50%) — cerchio pieno centrato.
• ellipse(rx ry at cx cy): Come circle ma con raggi diversi per x e y.
• polygon(x1 y1, x2 y2, ...): Il più versatile — definisce qualsiasi poligono. polygon(50% 0%, 100% 100%, 0% 100%) crea un triangolo.
• path(d="..."): Usa la sintassi dei path SVG per forme completamente arbitrarie.

Animare Clip-Path

Puoi animare clip-path con CSS transitions e @keyframes, a patto che le forme di partenza e arrivo abbiano lo stesso numero di punti. L'animazione tra due polygon() con lo stesso numero di vertici produce effetti di morphing molto coinvolgenti.