Question 1

Cos'è CSS clip-path?

Accepted Answer

La proprietà CSS clip-path ritaglia un elemento in una forma, nascondendo qualsiasi contenuto al di fuori della regione definita. Supporta forme come circle, ellipse, polygon, inset e path, permettendo effetti visivi creativi senza elementi aggiuntivi.

Question 2

Tutti i browser supportano clip-path?

Accepted Answer

Sì. clip-path è ben supportato in tutti i browser moderni inclusi Chrome, Firefox, Safari ed Edge. Per i browser più vecchi potrebbe essere necessario il prefisso -webkit- per alcune forme, ma la copertura per polygon e inset è eccellente.

Question 3

Cos'è la funzione polygon() in clip-path?

Accepted Answer

La funzione polygon() definisce una forma personalizzata specificando una lista di coppie di coordinate (x y). Ogni coppia rappresenta un vertice del poligono. Le coordinate usano percentuali (relative all'elemento) o lunghezze assolute.

Question 4

Posso animare le forme clip-path?

Accepted Answer

Sì! Puoi animare tra due forme clip-path con lo stesso numero di punti usando transizioni o animazioni CSS. Per esempio, animare da un inset rettangolare a un cerchio crea un effetto di morphing fluido.

Question 5

Qual è la differenza tra clip-path e mask?

Accepted Answer

clip-path usa una forma geometrica per ritagliare un elemento con bordi netti. CSS mask usa un'immagine (compresi i gradienti) come maschera alpha, supportando bordi morbidi e trasparenza complessa. clip-path è più semplice ed efficiente per forme geometriche.

Generatore CSS Clip-Path

Domande Frequenti

Comments & Feedback