Qual è la proprietà CSS clip-path?

clip-path definisce una regione di un elemento visibile; qualsiasi cosa al di fuori della regione viene ritagliata via. Supporta forme di base come poligono(), cerchio(), ellisse(), e inset(), permettendo di ritagliare elementi in forme non rettangolari senza immagini.

Posso modificare i punti del poligono a mano?

Si'. Dopo aver scelto qualsiasi preset poligonale, i vertici appaiono come maniglie trascinabili sull'anteprima. Trascinali per rimodellare il poligono e le coordinate percentuali aggiornano dal vivo nel CSS generato.

Il clip-path è supportato in tutti i browser?

Le versioni moderne di Chrome, Edge, Firefox e Safari tutti supportano clip-path con forme di base. Per i browser più vecchi potrebbe essere necessario un -webkit- prefisso o un fallback, poiché i browser non supportati ignoreranno semplicemente la regola e mostreranno l'elemento completo.

CSS Clip Path Generator

Costruire le forme di clip-path CSS trascinando punti o selezionando un preset, quindi copiare il poligono CSS.

Preset shapes

Show clipped-away area (dimmed)

Drag the points on the preview to reshape the polygon. Each point is an X/Y percentage.

Preview

CSS

Was this tool helpful?

Send output to:

How to use Clip Path Generator

Fare clic su una forma preimpostata per caricare i suoi punti, o scegliere inset, cerchio, o ellisse per clip arrotondate.
Trascinare i punti sull'anteprima per rimodellare un poligono, o regolare i cursori per le modalità cerchio e inset.
Toggle 'Show clipped-away area' per visualizzare in anteprima l'elemento completo, quindi fare clic Copia CSS per afferrare la regola clip-path.

Che cos'e'?

The Clip Path Generator permette di intagliare gli elementi in forme personalizzate utilizzando la proprietà CSS clip-path Scegliere da 20+ preset — triangoli, esagoni, frecce, bolle di messaggi e altro ancora — quindi fine-tune trascinando ogni poligono vertex direttamente sull'anteprima dal vivo. Per le forme arrotondate, passare al set, cerchio o preset ellisse e utilizzare i cursori per controllare raggio e posizione. Ogni modifica aggiorna l'anteprima e il percorso generato clip-path CSS istantaneamente, e l'overlay opzionale dimmerato mostra esattamente quale parte dell'elemento viene staccato. Tutto funziona completamente nel tuo browser, quindi il tuo lavoro non lascia mai il tuo dispositivo. Copiare il CSS una linea risultante e incollarlo direttamente nel foglio di stile

Advertisement

`FAQ`

Qual è la proprietà CSS clip-path?: clip-path definisce una regione di un elemento visibile; qualsiasi cosa al di fuori della regione viene ritagliata via. Supporta forme di base come poligono(), cerchio(), ellisse(), e inset(), permettendo di ritagliare elementi in forme non rettangolari senza immagini.
Posso modificare i punti del poligono a mano?: Si'. Dopo aver scelto qualsiasi preset poligonale, i vertici appaiono come maniglie trascinabili sull'anteprima. Trascinali per rimodellare il poligono e le coordinate percentuali aggiornano dal vivo nel CSS generato.
Il clip-path è supportato in tutti i browser?: Le versioni moderne di Chrome, Edge, Firefox e Safari tutti supportano clip-path con forme di base. Per i browser più vecchi potrebbe essere necessario un -webkit- prefisso o un fallback, poiché i browser non supportati ignoreranno semplicemente la regola e mostreranno l'elemento completo.

`Related tools`

`Author`

MWMarcus Webb"The DevTool Craftsman"
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Clip Path Generator on Wikipedia·Developer Tools on Wikipedia·Clip Path Generator on Britannica

`People also use`

← Back to Developer Tools · All tags

Last updated: 2026-06-03