Generatore di clip-path CSS

Progetta forme clip-path CSS in modo visivo

La proprietà clip-path ti permette di ritagliare un elemento in quasi qualsiasi forma usando solo il CSS. Avatar esagonali, bordi di sezione inclinati, pulsanti a forma di freccia e fumetti possono essere realizzati senza immagini né markup aggiuntivo. Scrivere a mano le coordinate di un poligono, però, è noioso. Questo generatore offre un'anteprima dal vivo con maniglie trascinabili, così puoi modellare l'elemento e copiare la dichiarazione finita.

Poligoni, cerchi, ellissi e inset

Lo strumento supporta le principali funzioni di forma di base. polygon() accetta un elenco di punti scritti come percentuali x e y, ideale per triangoli, trapezi, stelle e frecce. circle() ed ellipse() accettano un raggio e una posizione del centro, mentre inset() ritaglia verso l'interno da ciascun bordo del box con un raggio opzionale per gli angoli arrotondati. Scegli un preset come punto di partenza e rifiniscilo. Per i poligoni, trascina una maniglia qualsiasi per spostare un vertice, oppure metti a fuoco una maniglia e usa i tasti freccia per spostamenti precisi dell'uno per cento, tenendo premuto Shift per salti più ampi.

Consigli per usare clip-path

Poiché tutti i valori sono percentuali, la forma si ridimensiona insieme all'elemento, il che la rende adatta ai layout responsive. Ricorda che clip-path influisce solo sul disegno: anche bordi e ombre del box al di fuori della forma vengono tagliati, quindi usa un elemento contenitore con filter: drop-shadow() se ti serve un'ombra che segua la forma. Puoi anche animare il passaggio tra due poligoni con lo stesso numero di punti usando le transizioni CSS per ottenere morphing fluidi. Il codice generato è una singola riga che puoi incollare in qualsiasi foglio di stile, e tutte le modifiche avvengono localmente nel tuo browser.