Generatore di clip-path CSS

Questo strumento genera un valore CSS clip-path a partire da una forma preimpostata — cerchio, ellisse, triangolo, pentagono, esagono, stella o rettangolo arrotondato — e mostra la forma ritagliata in tempo reale su un riquadro di anteprima prima che tu copi il CSS. Non serve calcolare a mano le coordinate di polygon() per le forme più comuni.

Che cos'è questo strumento?

clip-path è la proprietà CSS che nasconde tutto ciò che sta fuori da una regione definita di un elemento, lasciando visibile solo la forma al suo interno — il resto del box dell'elemento è comunque presente nel layout, semplicemente non viene disegnato. Accetta funzioni di forme di base come circle(), ellipse(), inset() e polygon(), quest'ultima capace di ricevere un elenco arbitrario di coppie di coordinate x/y per definire qualsiasi forma dai bordi dritti.

Le coordinate di polygon() sono la parte più difficile da scrivere a mano — un pentagono, un esagono o una stella richiedono ciascuno diversi punti posizionati con precisione, e sbagliarne uno solo distorce l'intera forma. Questo strumento calcola quelle coordinate al posto tuo a partire da una forma preimpostata, aggiorna l'anteprima dal vivo istantaneamente e ti fornisce il codice CSS clip-path esatto da copiare.

Fonte: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — le specifiche che definiscono clip-path e le sue funzioni di forme di base.

Perché usarlo?

L'anteprima dal vivo ritaglia un vero riquadro di anteprima secondo la forma scelta, così vedi il risultato reale invece di doverlo immaginare dalle coordinate.
Sette forme preimpostate — cerchio, ellisse, triangolo, pentagono, esagono, stella e rettangolo arrotondato — coprono la stragrande maggioranza dei casi d'uso di clip-path senza dover scrivere a mano i punti di polygon.
Le forme cerchio, ellisse e rettangolo arrotondato includono un cursore per dimensione/arrotondamento, così puoi affinare la forma senza modificare le coordinate.
Genera codice CSS clip-path standard pronto da incollare su qualsiasi elemento.
Funziona interamente nel tuo browser: nessuna delle impostazioni configurate viene caricata da nessuna parte. Gratuito, senza registrazione, funziona su mobile.

Come si usa

Scegli una forma dal menu a tendina — cerchio, ellisse, triangolo, pentagono, esagono, stella o rettangolo arrotondato.
Per le forme cerchio, ellisse e rettangolo arrotondato, regola il cursore dimensione/arrotondamento per affinare il ritaglio.
Osserva il riquadro di anteprima aggiornarsi dal vivo mentre cambi la forma o il cursore.
Copia il codice CSS clip-path generato e incollalo sull'elemento che vuoi ritagliare.
Per un'immagine invece di un colore pieno, applica la stessa proprietà clip-path a un <img> o a un elemento con background-image.

Esempio

Input

Shape: Hexagon

Risultato

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Un ritaglio a esagono regolare, comunemente usato per foto profilo in stile badge o icone di funzionalità.

Forme di base vs. polygon()

Cerchio, ellisse e inset (rettangolo arrotondato) sono funzioni di forme di base integrate in CSS con una sintassi semplice propria — uno o due raggi, più una posizione centrale opzionale o un arrotondamento degli angoli. Triangolo, pentagono, esagono e stella non sono forme integrate; sono tutte espresse tramite polygon(), un elenco piatto di coppie di coordinate x/y che tracciano il contorno della forma. Questo strumento calcola automaticamente quelle coordinate per poligoni regolari (con punti equidistanti) e per una stella a cinque punte, che è la parte più tediosa da ottenere correttamente a mano.

Modelli comuni di clip-path

Avatar o badge circolare: circle() con un raggio medio, spesso combinato con un'immagine sorgente quadrata così il cerchio non viene stirato in un'ellisse.
Divisore di sezione angolato: un poligono personalizzato (non incluso qui come preimpostazione) che inclina il bordo superiore o inferiore di una sezione a larghezza piena per un'interruzione di pagina non rettangolare.
Icona o forma badge a stella: la preimpostazione stella, utile come forma decorativa invece di disegnare a mano un SVG per casi semplici.
Griglia fotografica esagonale: immagini ritagliate a esagono disposte in una struttura a nido d'ape, un pattern comune per portfolio o pagine team.
Rettangolo arrotondato come alternativa leggera a border-radius quando serve che il ritaglio tagli anche il contenuto figlio che fuoriesce, dato che border-radius da solo non ritaglia i figli senza un ulteriore overflow:hidden.

Abbinamento con altri strumenti CSS

clip-path è spesso combinato con un gradiente CSS come sfondo da ritagliare, oppure con un box-shadow applicato a un elemento wrapper (dato che clip-path ritaglia anche l'ombra dell'elemento stesso, un'ombra su un elemento genitore è la soluzione tipica per una forma ritagliata che deve comunque sembrare fluttuante).

→ Generatore di gradienti CSS · Generatore di raggio di bordo · Generatore di ombreggiatura dei riquadri

Domande frequenti

clip-path influisce sulla dimensione del layout dell'elemento?

No: l'elemento mantiene la dimensione e la posizione del proprio box originale ai fini del layout; clip-path cambia solo ciò che viene disegnato. Gli elementi circostanti vengono disposti come se il ritaglio non fosse stato applicato, il che può sorprendere se ti aspetti che la forma ritagliata si comporti come un elemento ridimensionato.

Perché il box-shadow non compare sulla mia forma ritagliata?

clip-path ritaglia l'intera resa dell'elemento, inclusa qualsiasi ombra che proietta, quindi il box-shadow proprio di un elemento ritagliato a cerchio o poligono viene tagliato al confine del ritaglio. Per ottenere un'ombra che segua la forma visibile, applica box-shadow a un elemento wrapper non ritagliato attorno a quello ritagliato.

Posso animare o fare una transizione di una forma clip-path?

Sì, ma solo tra due valori clip-path dello stesso tipo e con lo stesso numero di punti — per esempio, un polygon() con 6 punti che transita verso un altro polygon() con 6 punti. La transizione tra forme fondamentalmente diverse (un circle() verso un polygon()) generalmente non si anima in modo fluido su tutti i browser.

clip-path può essere usato sulle immagini di sfondo e non solo sul contenuto dell'elemento?

clip-path ritaglia l'intero elemento, incluso il suo background-image, background-color, i bordi e il contenuto insieme, non specificamente lo sfondo. Se vuoi ritagliare solo un'immagine di sfondo lasciando invariato il resto del contenuto, applica clip-path a un elemento separato che contiene solo lo sfondo.

clip-path è supportato in tutti i browser moderni?

Sì: clip-path con le funzioni di forme di base (circle, ellipse, inset, polygon) è ampiamente disponibile in Baseline su tutti i principali browser da gennaio 2020, secondo i dati di compatibilità di MDN. In genere è sicuro usarlo in produzione senza un fallback per le versioni attuali dei browser.