◇

Generatore di CSS clip-path

Ritaglia un elemento in forme comuni e copia il CSS clip-path.

I tuoi file restano su questo dispositivo

I file vengono elaborati nel browser, mai caricati su un server. Il sito scarica il codice e le risorse necessarie. Senza account né tracciamento.

Usa Scarica per salvare questo strumento in un unico file HTML da usare offline.

Privacy →

Forma

output

Prova un esempio svolto

Esempio

Scegli la forma esagono per ottenere clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Ogni coppia è una posizione x e y dentro l’elemento, quindi la forma si adatta a larghezza e altezza dell’elemento.

Da ricordare

Il ritaglio nasconde parte dell’elemento ma ne mantiene il riquadro di layout: gli elementi vicini non si spostano e gli angoli nascosti non ricevono più i clic. Anche bordi e ombre vengono ritagliati; per un’ombra applica un filtro drop-shadow a un contenitore.

Informazioni su questo strumento

Scegli una forma e ritaglia all'istante un riquadro di anteprima con la regola clip-path corrispondente, poi copia il CSS pronto all'uso. L'anteprima si aggiorna in tempo reale, interamente nel tuo browser.

Domande frequenti

Come funzionano i clip-path con poligono?

Ogni punto è una coppia di percentuali x y relative al riquadro; il browser li collega nell'ordine indicato e mostra solo l'area all'interno del contorno.

Tutti i browser supportano clip-path?

Le forme polygon, circle, ellipse e inset sono supportate in ogni browser moderno, quindi il CSS generato funziona senza prefissi.