Generatore di clip-path

Come funziona

clip-path riduce un elemento a un contorno. Tutto ciò che sta fuori dalla forma non viene disegnato e non è cliccabile, il che ne fa una vera forma anziché l'immagine di una forma, e funziona su qualsiasi elemento, comprese immagini e video.

Percentuali, non pixel

I punti del poligono sono espressi come percentuali della larghezza e dell'altezza dell'elemento stesso, quindi la forma si estende con l'elemento anziché rompersi a una dimensione diversa. È ciò che la rende utilizzabile in un layout responsive.

I clic seguono la forma

È la parte che distingue clip-path da una sovrapposizione decorativa. La regione ritagliata non riceve affatto eventi del puntatore, quindi un pulsante triangolare è triangolare per il mouse oltre che per l'occhio.

Animare tra una forma e l'altra

Un poligono può passare con una transizione fluida a un altro poligono solo se entrambi elencano lo stesso numero di punti. Il trucco abituale è completare la forma più semplice con punti duplicati in modo che i conteggi coincidano: un triangolo scritto come quattro punti, con due nello stesso posto, può trasformarsi in un quadrato.

La riga -webkit-

I browser attuali richiedono solo la proprietà senza prefisso. La copia con prefisso è inclusa perché alcune versioni più vecchie di Safari la richiedono ancora e lasciarla non costa nulla.

Cosa non fa

Ritaglia; non ridisegna il flusso. Il testo circostante continua a trattare l'elemento come il suo rettangolo originale. Per far scorrere il testo attorno a una forma serve shape-outside, che usa la stessa sintassi.