Generatore CSS clip-path
Genera snippet CSS con la proprietà clip-path per ritagliare elementi e creare maschere grafiche con cerchi, ellissi e poligoni.
Esegui lo strumento
Questo generatore online crea snippet CSS con la dichiarazione clip-path per ritagliare elementi grafici e contenitori HTML. Lo strumento supporta forme geometriche dedicate come cerchio, ellisse, triangolo, esagono, pentagono, stella e rombo. Quando imposti un cerchio, puoi definire il valore percentuale del raggio e il punto di ancoraggio desiderato, come il centro o coordinate specifiche. Con l'ellisse, il generatore calcola proporzionalmente il secondo raggio moltiplicando la dimensione indicata per 0,6 e applica la posizione inserita. I modelli poligonali, inclusi triangolo, stella ed esagono, utilizzano coordinate percentuali fisse con la funzione polygon per garantire tracciati coerenti. Qualsiasi nome di forma non riconosciuto produce automaticamente la geometria circolare di base. Puoi copiare la regola CSS generata e incollarla direttamente nel tuo foglio di stile per creare maschere visive moderne per immagini, schede o pulsanti senza ricorrere a complessi file vettoriali esterni.
Istruzioni
- Indica il nome della forma desiderata tra le opzioni disponibili, come circle, ellipse, triangle, hexagon, pentagon, star o diamond.
- Inserisci la dimensione percentuale numerica per regolare l'ampiezza delle forme circolari o ellittiche.
- Specifica la posizione di ancoraggio per le geometrie supportate, ad esempio center oppure coordinate come top left.
- Avvia la generazione per visualizzare il frammento di codice CSS pronto da copiare nel tuo progetto.
Esempi
- Impostando Forma su circle, Dimensione su 40 e Posizione su center, ottieni la regola clip-path: circle(40% at center);.
- Impostando Forma su star, il generatore restituisce clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);.
FAQ
Cosa accade se inserisco un nome di forma non riconosciuto?
Se inserisci una forma non presente nell'elenco di modelli supportati, il generatore applica automaticamente la geometria del cerchio con la dimensione e la posizione specificate.
Come influiscono dimensione e posizione sui poligoni?
Le forme poligonali come triangolo, pentagono, esagono, stella e rombo utilizzano coordinate fisse in percentuale; i parametri di dimensione e posizione modificano esclusivamente cerchio ed ellisse.
Come calcola il generatore il secondo raggio dell'ellisse?
Il primo raggio corrisponde direttamente al valore percentuale della dimensione indicata, mentre il secondo raggio viene calcolato moltiplicando quel valore per 0,6.