Generatore di Clip Path CSS

Le cinque funzioni di forma

Ritagli poligonali comuni

/* Esagono */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rombo */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / freccia che punta a destra */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogramma */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Fetta diagonale (sezione eroe moderna) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

La diagonale della sezione eroe è probabilmente la più utilizzata di tutte, conferisce a una sezione un aspetto moderno angolato senza alcun SVG.

Animare il clip-path

Il clip-path si anima finché entrambi gli stati hanno la stessa funzione di forma con lo stesso numero di punti. Un poligono a 4 vertici si anima senza problemi in un altro poligono a 4 vertici; aggiungere o rimuovere vertici interrompe l’interpolazione.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Usa questo per effetti di rivelazione, distorsioni sottili al passaggio del mouse o transizioni di pagina.

Clip-path vs. overflow: hidden

overflow: hidden ritaglia il rettangolo della border-box (che può essere arrotondato con border-radius). clip-path ritaglia qualsiasi forma tu definisca e ritaglia tutto, inclusi ombre e contorni. Se hai bisogno che le ombre rimangano visibili al di fuori della forma, clip-path non è ciò che desideri.

filter: drop-shadow() può riaggiungere un’ombra che segue la forma sugli elementi clip-path, ma è più lenta.

Prestazioni

Il clip-path è accelerato dalla GPU nei browser moderni, quindi i clip-path animati sono fluidi. L’eccezione è path() e poligoni molto complessi (40+ vertici) che tornano al rendering CPU su alcuni browser.

Accessibilità

Il clip-path cambia solo ciò che è visibile. I lettori di schermo, il focus da tastiera e gli eventi puntatore seguono l’intero riquadro dell’elemento, non la forma ritagliata. Se un’immagine è ritagliata in una stella, il testo alternativo viene letto normalmente. Se un pulsante è ritagliato in un chevron, il suo obiettivo di clic è il rettangolo intero, non il chevron visibile, il che può causare clic accidentali su uno spazio apparentemente vuoto.

Per pulsanti con forme ritagliate insolite, imposta la larghezza/altezza dell’elemento in modo che l’area di clic corrisponda ragionevolmente bene all’area visibile.