Proprietà CSS avanzate: crea forme con “clip-path”

Crea forme personalizzate con la proprietà CSS "clip-path"

Una delle proprietà avanzate più sensazionali di CSS c’è sicuramente clip-path. A cosa serve?

Con “clip-path” puoi tagliare un elemento HTML e farne apparire solo una parte, creando forme personalizzate. La sintassi è semplice:

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

clip-source può essere un URL che fa riferimento a un’immagine di maschera o una funzione di forma come “polygon” o “path”. La proprietà “clip-path” può anche utilizzare una forma di base come un cerchio o un rettangolo, o una casella geometrica come “margin-box”. La parola chiave “none” può essere utilizzata per disabilitare la proprietà “clip-path”.

In particolare, vediamo come usare le funzioni di forma come “polygon” o “path” per creare immagini più o meno complesse.

Forme semplici

ROMBO

/* ROMBO */
.rombo {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

TRIANGOLO

/* TRIANGOLO */
.triangolo {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

RETTANGOLO ARROTONDATO

/* RETTANGOLO ARROTONDATO */
.rettangolo {
    clip-path: inset(10% round 20% 20%);
}

Forme complesse

Ma è possibile anche dare vita a forme con complessità sempre maggiori, l’unico limite è la tua immaginazione!

Vuoi qualche esempio? Detto, fatto:

FORMA ASTRATTA

/* FORMA ASTRATTA */
.astratta {
    clip-path: path("M10,10 C20,20 30,40 40,10");
}

Che ne pensi invece di forme più conosciute, ma altrettanto complesse?
Si, è possibile! Se non ci credi, ecco qualche esempio.

CUORE

/* CUORE */
.cuore {
    clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
}

STELLA

/* STELLA */
.stella {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Un po' di movimento

Ma non è ancora finita!
Ora che abbiamo visto come utilizzare “clip-path”, vediamo come animare le forme.

Ecco un esempio di animazione “clip-path”:

.animazione {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 1s;
}
.animazione:hover {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Il risultato sembra un semplice rettangolo, ma prova a posizionarci su il cursore del mouse…

Conclusioni

So a cosa stai pensando: WOW!

Considera che abbiamo usato la proprietà “clip-path” su semplici <div>, ma puoi applicare questa fantastica proprietà anche alle immagini, per creare cornici e forme particolari.

Questi sono solo alcuni esempi di come utilizzare “clip-path” per creare forme interessanti e animazioni. E tu cosa ne pensi di condividere i tuoi esperimenti?