Come usare un generatore CSS clip-path per creare forme

Il generatore crea uno snippet CSS con clip-path per mascherare un elemento secondo una forma. Cerchi ed ellissi usano dimensione e posizione; le forme poligonali nominate seguono modelli con coordinate preimpostate.

A cosa serve il generatore CSS clip-path

Un generatore CSS clip-path prepara il testo necessario per mascherare un elemento secondo una forma. È utile quando vuoi ottenere rapidamente una sagoma circolare, ovale o poligonale senza scrivere manualmente la dichiarazione CSS. Il risultato è uno snippet che contiene clip-path, quindi puoi esaminarne la geometria prima di usarlo nel foglio di stile dell’elemento interessato.

L’uso parte da tre dati: forma, dimensione e posizione. La forma può essere lasciata vuota per partire dal cerchio. I valori di dimensione e posizione sono rilevanti soprattutto per cerchi ed ellissi; le forme poligonali nominate seguono invece il proprio modello con coordinate percentuali preimpostate. Questa distinzione aiuta a scegliere correttamente il controllo da modificare e a non aspettarsi lo stesso comportamento per ogni sagoma.

Come generare lo snippet CSS

1. Apri il generatore e individua i campi dedicati alla forma, alla dimensione e alla posizione. Se vuoi una configurazione iniziale circolare, lascia vuoto il campo della forma. Il campo della dimensione può restare vuoto e userà 50; lo stesso vale per la posizione, che in assenza di un valore userà center.

2. Per un cerchio, inserisci circle e indica la dimensione che vuoi esaminare. Il valore fornito viene usato come percentuale, mentre la posizione viene collocata dopo la parola chiave at nello snippet generato. Per esempio, una posizione center produce una dichiarazione centrata rispetto alla forma risultante.

3. Per un’ellisse, inserisci ellipse, poi indica la dimensione e la posizione. Il generatore usa la dimensione per la prima percentuale e calcola la seconda moltiplicandola per 0,6. Le due percentuali vengono collocate nella posizione indicata. In questo modo la proporzione dell’ellisse dipende dal valore inserito, mentre il punto di collocazione dipende dalla posizione scelta.

4. Per una sagoma poligonale, usa uno dei nomi riconosciuti: triangle, hexagon, pentagon, star o diamond. Sono disponibili anche circle ed ellipse, che seguono le regole appena descritte. Dopo aver selezionato il nome, avvia la generazione e leggi lo snippet prodotto, senza interpretare la presenza dei campi di dimensione e posizione come una modifica automatica del poligono.

5. Esamina la dichiarazione clip-path prima di applicarla. Verifica che il nome della forma corrisponda a quello desiderato, che le percentuali siano coerenti con la sagoma scelta e che la posizione riportata sia quella prevista. Copia quindi lo snippet nel punto del CSS in cui vuoi definire l’area visibile dell’elemento mascherato. Se cambi forma o valori, genera un nuovo risultato e confronta la nuova dichiarazione con la precedente.

Come leggere il risultato

Lo snippet generato contiene una dichiarazione CSS clip-path. La sua funzione è definire l’area visibile dell’elemento secondo la geometria restituita, perciò la lettura deve concentrarsi sulla forma e sui valori presenti nella dichiarazione.

Nel caso del cerchio, la percentuale riflette la dimensione fornita e la posizione appare dopo at. Nell’ellisse, invece, la seconda percentuale non è indipendente: corrisponde alla dimensione inserita moltiplicata per 0,6. Se il risultato non ha l’aspetto atteso, controlla prima questa relazione e poi la posizione indicata.

Le forme triangle, hexagon, pentagon, star e diamond sono basate su coordinate percentuali fisse. Di conseguenza, il loro risultato va letto come il modello associato al nome scelto, non come una sagoma ridimensionata dai valori di dimensione o posizione. Un nome non riconosciuto non crea una geometria nuova: viene usata la geometria del cerchio. Per ottenere una delle sagome disponibili, sostituisci il testo con un nome riconosciuto e genera nuovamente lo snippet.

Il generatore non documenta una modalità per definire una sagoma libera. Se la forma che cerchi non è tra quelle riconosciute, il risultato non va presentato come una personalizzazione della geometria: occorre invece scegliere il modello più vicino tra quelli disponibili e verificare il testo prodotto.

Esempio pratico

Stai preparando una scheda prodotto e vuoi applicare a un’immagine una maschera ovale centrata.

Per un’immagine che deve avere una sagoma ovale centrata, inserisci ellipse come forma, 80 come dimensione e center come posizione, poi genera lo snippet.

Uno snippet con una dichiarazione simile a clip-path: ellipse(80% 48% at center);, perché la seconda percentuale è il 60% di 80.

Limiti

• Le forme poligonali nominate seguono coordinate fisse e un nome non riconosciuto ricade sulla geometria del cerchio; il generatore non documenta una modalità per definire una sagoma libera.

Errori comuni

• Digitare un nome non riconosciuto può far aspettare una sagoma diversa da quella restituita. Sostituisci il valore con circle, ellipse, triangle, hexagon, pentagon, star o diamond, quindi genera di nuovo lo snippet.

Domande frequenti

Cosa succede se non inserisco una forma, una dimensione o una posizione?

Se lasci vuoto il campo della forma, viene usato circle. Se lasci vuoto il campo della dimensione, viene usato 50, mentre per la posizione viene usato center.

Come vengono usati dimensione e posizione per un’ellisse?

Con ellipse, la prima percentuale usa la dimensione inserita e la seconda usa quella stessa dimensione moltiplicata per 0,6. La posizione indicata viene riportata dopo at.

Posso scrivere il nome di una forma personalizzata?

Un nome non riconosciuto usa la geometria del cerchio, non una sagoma personalizzata. Per un altro modello, inserisci uno dei nomi supportati: circle, ellipse, triangle, hexagon, pentagon, star o diamond.