Generatore CSS Clip-Path
Disegna forme poligonali arbitrarie — inclusi intagli concavi — trascinando i punti su una preview dal vivo o su una tua immagine caricata, e copia il valore CSS clip-path: polygon(...) risultante.
🔒 Elaborato interamente nel tuo browser: nulla di ciò che inserisci qui verrà mai caricato.
Risultato
La proprietà CSS clip-path accetta una funzione polygon() composta da un numero qualsiasi di coppie di coordinate x/y, il che significa che può ritagliare un riquadro in forme che vanno ben oltre i semplici rettangoli e cerchi a cui si ricorre di solito. Il problema è che digitare quelle coordinate a mano è noioso e quasi impossibile da azzeccare per qualsiasi figura più complessa di un triangolo elementare — questo generatore trasforma quella lista di coordinate in un insieme di punti trascinabili su una preview dal vivo, così la forma che vedi è sempre la forma che il CSS produce.
Ogni punto sulla preview è memorizzato come percentuale della larghezza e dell'altezza del riquadro, che è esattamente il modo in cui clip-path: polygon() funziona dietro le quinte: una forma costruita così mantiene le sue proporzioni corrette indipendentemente dalla dimensione che l'elemento assume in una pagina reale, da una piccola maschera per un'icona a un banner hero a tutta larghezza. Trascina qualsiasi punto per ridisegnare il contorno, clicca vicino a un lato per aggiungere un nuovo punto esattamente dove hai cliccato, oppure fai doppio clic su un punto esistente per cancellarlo — l'editor mantiene sempre almeno tre punti, poiché un poligono non può esistere con meno.
I sei predefiniti inclusi sono scelti per dimostrare che clip-path può fare molto di più delle forme convesse: la stella e la freccia si basano entrambe su angoli rientranti che puntano verso l'interno, il fumetto ritaglia una coda triangolare da un rettangolo altrimenti piatto, e il tagliando perforato incide due intagli su lati opposti proprio come un vero biglietto staccabile. Carica un predefinito qualsiasi e continua a trascinare da lì — niente nell'editor ti vincola alla forma di partenza.
Carica una tua immagine per vedere l'anteprima del clip-path su un contenuto reale anziché su un riquadro piatto, oppure salta del tutto il caricamento e la preview ripiega su un motivo a strisce in modo che la forma ritagliata resti comunque ben visibile. Come tutti gli strumenti di questo sito, l'intero processo gira in locale nel browser: nessuna immagine lascia mai il tuo dispositivo, e il generatore continua a funzionare offline dopo che la pagina è stata caricata.