Generatore di clip-path

Come usare il generatore di clip-path

1. Scegli una Forma: Poligono, Cerchio, Ellisse o Inset. Lo strato sbiadito mostra l’elemento intero, quello brillante mostra ciò che resta visibile dopo il ritaglio.
2. Trascina i punti nell’editor. In un poligono ogni punto è un vertice; clicca in un punto qualsiasi dell’area per aggiungerne uno sul lato più vicino. Per un cerchio o un’ellisse, trascina il centro e i punti del raggio. Per un inset, trascina i quattro punti dei lati.
3. Rifinisci nei campi sotto: l’elenco Punti (X e Y in percentuale, con Rimuovi e Aggiungi punto) per i poligoni, oppure i campi Raggio, Centro X, Centro Y, Alto, Destra, Basso, Sinistra e Angoli arrotondati (px) per le altre forme.
4. Fai prima con i Modelli: triangolo, trapezio, parallelogramma, rombo, pentagono, esagono, ottagono, smussato, stella, croce, frecce, chevron, fumetto, cerchio, ellisse e inset.
5. Spunta Aggancia al 5 % per valori ordinati e Aggiungi -webkit-clip-path (vecchio Safari) se supporti ancora Safari 13.0 o precedenti.
6. Se vuoi, trascina una foto in Immagine di sfondo (facoltativa) per vedere la forma sulla tua immagine. Il file non viene mai caricato.
7. Copia il Codice CSS con Copia.

Da tastiera: seleziona un punto, spostalo con i tasti freccia (1 %, o 10 % con Maiusc) e premi Canc per eliminare un punto del poligono. Un poligono mantiene sempre almeno tre punti.

Le funzioni di forma di clip-path

clip-path nasconde tutto ciò che sta fuori da una forma. L’elemento mantiene le sue dimensioni nel layout: vengono ritagliati solo il disegno e l’area cliccabile.

• polygon(x1 y1, x2 y2, …) unisce i punti in ordine e chiude la forma. polygon(50% 0%, 100% 100%, 0% 100%) è un triangolo con la punta in alto. Le coordinate partono dall’angolo in alto a sinistra dell’elemento.
• circle(r at cx cy): circle(50% at 50% 50%) è il cerchio più grande centrato nell’elemento. Un raggio in percentuale si riferisce alla diagonale dell’elemento divisa per √2, quindi corrisponde a una quota della larghezza solo per gli elementi quadrati.
• ellipse(rx ry at cx cy): il raggio orizzontale è una quota della larghezza, quello verticale una quota dell’altezza.
• inset(top right bottom left round radius) ritaglia un rettangolo all’interno dei bordi, con la stessa scrittura abbreviata da uno a quattro valori dei margini e angoli arrotondati facoltativi.

Lo strumento scrive percentuali, quindi la forma scala con l’elemento qualunque sia la sua dimensione.

Consigli per forme ben fatte

• L’ordine dei punti del poligono conta: percorrere il contorno in senso orario (o antiorario) evita forme incrociate “a farfallino”.
• Due forme con lo stesso numero di punti si possono animare: transition: clip-path 0.4s trasforma dolcemente un esagono in un altro. Il browser non sa interpolare tra poligoni con un numero di punti diverso.
• clip-path ritaglia anche box-shadow e bordi. Per dare un’ombra a una forma ritagliata, applica filter: drop-shadow() a un elemento genitore.
• Le aree ritagliate non ricevono clic né hover: comodo per pulsanti dalla forma irregolare.