Generatore di clip-path CSS

Cos'è Generatore di clip-path CSS?

Il generatore di clip-path CSS è un editor visivo gratuito per la proprietà CSS clip-path, pensato per sviluppatori front-end e designer che vogliono ritagliare elementi in forme non rettangolari. Scegli un preset dal menu a discesa: circle() ed ellipse() con un raggio e un punto centrale, polygon() con tutti i vertici che ti servono, inset() con quattro offset dei bordi, o una variante inset() arrotondata con un raggio d'angolo. Ogni parametro è una percentuale inserita tramite un campo numerico, e un riquadro di anteprima su sfondo a scacchiera rivela la forma risultante in tempo reale. Il CSS clip-path completo viene generato per essere copiato. Usalo per mascherare immagini, creare divisori di sezione diagonali, costruire avatar esagonali o ritagliare forme a fumetto senza contare le coordinate a mano.

Come usare Generatore di clip-path CSS

1. Scegli una forma dal menu a discesa dei preset: cerchio, ellisse, poligono, inset o arrotondato.
2. Per il cerchio o l'ellisse, imposta il raggio (o i raggi X/Y) e la posizione centrale X/Y in percentuale.
3. Per il poligono, modifica la X e la Y di ogni vertice in percentuale; clicca su Aggiungi punto per aggiungere altri vertici e riordinali modificando i valori.
4. Per inset o arrotondato, imposta gli offset superiore, destro, inferiore e sinistro; l'arrotondato prevede anche un raggio d'angolo.
5. Osserva l'anteprima in tempo reale ritagliare il box mentre digiti.
6. Copia il CSS clip-path generato e incollalo nel tuo foglio di stile.

Esempi

Preset cerchio, raggio 50%, centro 50% 50%

clip-path: circle(50% at 50% 50%);

Preset poligono, punti (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Preset arrotondato, inset 10% su tutti i lati, raggio d'angolo 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Domande frequenti

A cosa serve clip-path?

La proprietà CSS clip-path ritaglia un elemento in una forma di base, così solo l'area all'interno della forma resta visibile. È ottima per avatar circolari, tagli di sezione diagonali, griglie esagonali, maschere di immagini e fumetti — il tutto senza immagini o file SVG aggiuntivi.

Come funziona il preset poligono?

polygon() disegna una forma collegando in ordine un elenco di vertici X/Y. Modifica i valori percentuali di ogni punto e usa Aggiungi punto per inserire altri vertici; l'ultimo punto si ricollega automaticamente al primo. Vengono mantenuti almeno tre punti affinché la forma resti valida.

Perché i valori sono in percentuale?

Le percentuali fanno sì che il ritaglio si ridimensioni con l'elemento, così lo stesso clip-path funziona a qualsiasi dimensione. 0% è il bordo sinistro o superiore e 100% quello destro o inferiore del box dell'elemento.

Cosa aggiunge il preset arrotondato?

Il preset arrotondato usa inset() con un raggio d'angolo round, producendo un rettangolo ritagliato verso l'interno su ogni lato e con angoli arrotondati — utile per ritagli incorniciati e morbidi che un semplice border-radius non può combinare con un ritaglio inset.

I miei dati vengono inviati da qualche parte?

No. Il generatore funziona interamente nel tuo browser con JavaScript — i valori della tua forma non lasciano mai il dispositivo, quindi funziona in modo privato e perfino offline dopo il caricamento della pagina.