Generatore di percorsi di clip CSS

CSS clip-path accetta una funzione polygon() composta da un numero qualsiasi di coppie di coordinate x/y, il che significa che può ritagliare una scatola in forme ben oltre i semplici rettangoli e cerchi che la maggior parte delle persone raggiunge. Il problema è che digitare quelle coordinate a mano è noioso e quasi impossibile da ottenere per qualsiasi cosa oltre un triangolo di base: questo generatore trasforma l'elenco di coordinate in una serie di punti trascinabili su un'anteprima dal vivo, quindi la forma che vedi è sempre la forma prodotta dal CSS.

Ogni punto nell'anteprima viene 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 in questo modo mantiene le sue proporzioni corrette indipendentemente dalla dimensione in cui finisce l'elemento in una pagina reale, da una piccola maschera di icone a un banner di eroe a larghezza intera. Trascina qualsiasi punto per rimodellare il contorno, fai clic vicino a un bordo per aggiungere un nuovo punto esattamente nel punto in cui hai fatto clic o fai doppio clic su un punto esistente per eliminarlo: l'editor mantiene sempre almeno tre punti, poiché un poligono non può esistere con meno punti.

I sei preset in bundle sono scelti per dimostrare che clip-path può fare di più delle forme convesse: la stella e la freccia si basano entrambe su angoli riflessi che puntano verso l'interno, il fumetto ritaglia una coda triangolare da un rettangolo altrimenti semplice e il matrice del biglietto incide due tacche sui bordi opposti proprio come appare un vero biglietto perforato. Carica qualsiasi preimpostazione e continua a trascinare da lì: nulla nell'editor ti blocca nella forma iniziale.

Carica la tua immagine per visualizzare in anteprima il percorso della clip rispetto al contenuto reale anziché a una semplice casella, oppure salta completamente il caricamento e l'anteprima ritorna a un motivo a strisce in modo che la forma tagliata rimanga chiaramente visibile in entrambi i casi. Come ogni strumento di questo sito, il tutto viene eseguito localmente nel browser: nessuna immagine lascia mai il tuo dispositivo e il generatore continua a funzionare offline una volta caricata la pagina.