Generatore di effetti di clipping con clip-path CSS.
Generatore gratuito di effetti di clipping con clip-path CSS, senza necessità di installazione. Strumento per la creazione di forme di clipping personalizzate in modo visuale.
Informazioni su CSS Clip-Path Generator
CSS Clip-Path Generator è uno strumento visuale per creare e testare le proprietà CSS clip-path. Clip-path ti consente di ritagliare gli elementi in forme base (cerchio, ellisse, poligono) o in un percorso SVG. Questo strumento fornisce un'anteprima in tempo reale e la generazione del codice per aiutarti a progettare forme personalizzate per i tuoi progetti web.
Utilizzo delle Forme Predefinite
Fai clic su qualsiasi pulsante di forma predefinita nel pannello Predefiniti per applicarla istantaneamente. Lo strumento include 12 forme integrate: Triangolo, Trapezio, Parallelogramma, Pentagono, Esagono, Ettagono, Ottagono, Stella, Cerchio, Ellisse, Cornice Incassata e Inserto Arrotondato. L'anteprima si aggiorna immediatamente per mostrare come la forma ritaglia l'elemento.
Input Percorso Personalizzato
Inserisci qualsiasi valore clip-path valido nel campo di input Percorso Personalizzato. Supporta tutte le funzioni clip-path: polygon(), circle(), ellipse(), inset() e path(). Lo strumento visualizza il codice CSS generato con sia il prefisso standard che -webkit- per la massima compatibilità del browser. Fai clic sul pulsante Copia per copiare il codice negli appunti.
Costruttore Poligono
Il Costruttore Poligono fornisce un'interfaccia visuale per creare forme poligonali personalizzate. Ogni punto è definito dalle coordinate X e Y (0-100%). Aggiungi più punti (minimo 3) per creare poligoni complessi o rimuovi punti per semplificare. Il costruttore genera automaticamente la sintassi CSS polygon() valida mentre regoliamo le coordinate.
Opzioni Anteprima
Personalizza l'anteprima regolando lo slider Dimensione (100-400px) e utilizzando il selettore colore per cambiare il colore di sfondo dell'elemento. Queste regolazioni ti aiutano a visualizzare come apparirà il clip-path con diverse dimensioni e colori degli elementi nel tuo design.
Compatibilità Browser
CSS clip-path è supportato in tutti i browser moderni. Lo strumento include automaticamente -webkit-clip-path per la compatibilità Safari. Nota che clip-path con la funzione path() ha supporto limitato nei browser più vecchi. Testa sempre i tuoi browser di destinazione prima del deploy in produzione.
▶A cosa serve CSS clip-path?
▶Qual è la differenza tra polygon(), circle(), ellipse() e inset()?
▶Come creo un poligono irregolare?
▶Perché il mio clip-path non funziona in alcuni browser?
▶Posso animare le modifiche clip-path?
▶Cosa significano le percentuali X e Y nei punti del poligono?
▶Come uso i dati del percorso SVG con clip-path?
▶Esiste un limite al numero di punti del poligono?
Se questo strumento è stato di aiuto per te, considera l’idea di regalarmi un caffè.
Comprami un caffè.