Come funziona il generatore di clip-path
Questo strumento ti permette di tracciare un poligono direttamente sopra un elemento, semplicemente trascinando i punti di controllo. Mentre modifichi la forma, il codice CSS aggiornato viene generato in tempo reale seguendo la sintassi polygon() di clip-path.
Tutte le coordinate sono espresse in percentuale, così la forma si adatta in modo fluido a qualsiasi dimensione dell’elemento. Puoi partire da una delle forme predefinite disponibili e modificarla a piacere aggiungendo o spostando i vertici.
Limiti e compatibilità
Il generatore è progettato esclusivamente per creare forme poligonali, quindi non supporta path SVG complessi né riferimenti url(). Inoltre, la precisione è relativa alle dimensioni dell’elemento e non assoluta in pixel, per garantire una miglior scalabilità responsive.
La compatibilità del codice clip-path: polygon() copre tutti i browser moderni, ma alcune funzioni avanzate di clip-path possono non funzionare su browser datati o in vecchie versioni di Internet Explorer.
A chi si rivolge e casi d’uso
Lo strumento è pensato per web designer e sviluppatori front-end che vogliono ritagliare immagini, div o altri elementi con precisione e rapidità, senza doversi destreggiare tra coordinate manuali.
È ideale per prototipare UI, applicare maschere creative o ottimizzare la grafica di layout responsivi. Tutto avviene direttamente nel browser: privacy garantita e nessun dato inviato online.
Domande frequenti
Posso usare il clip-path generato anche su div o iframe, non solo su immagini?
Sì, puoi applicare il codice CSS generato a qualsiasi elemento HTML con proprietà <code>clip-path</code>, come div, immagini, o iframe. Basta inserire la regola nel tuo stylesheet.
L’area ritagliata continua a ricevere eventi del mouse?
Solo la parte visibile del poligono risponde agli eventi come click o hover. Le aree esterne al clip-path vengono ignorate dal browser per le interazioni.
Il codice CSS generato è compatibile con tutti i browser?
La sintassi <code>clip-path: polygon()</code> funziona nella maggior parte dei browser moderni. Per esigenze legacy, verifica sempre la compatibilità specifica sul sito Can I Use.
I miei dati o le mie immagini vengono caricati su internet?
No, tutto il calcolo e la generazione del codice avvengono nel tuo browser. Nessun file o informazione viene mai inviato o salvato online.
C’è un limite al numero di punti che posso usare?
Puoi aggiungere o modificare i punti di controllo liberamente, ma più punti rendono la forma e il codice più complessi. Mantieni il poligono semplice per una migliore compatibilità e manutenzione.
Qualcosa non va o hai un'idea per questo strumento? Scrivici