Generatore di clip-path CSS
Scegli una forma e trascina i punti nell’anteprima per regolare. Il codice clip-path in percentuale funziona con qualsiasi dimensione dell’elemento.
Come si usaRitaglio in forme con clip-path
Disponibile in: 
Generatore di clip-path CSS: a cosa serve
Scegli una delle forme pronte (triangolo, rombo, esagono, pentagono, stella, freccia, messaggio, angoli tagliati, parallelogramma, cerchio o ellisse) e trascina i punti nell’anteprima per regolare. Le coordinate sono in percentuale, quindi il ritaglio funziona a qualsiasi dimensione.
Prova con la tua foto e copia la riga di clip-path pronta.
Come si usa
- Scegli una forma.
- Trascina i punti per regolare e prova con una foto.
- Copia il clip-path e usalo nel CSS.
Quando usarlo
- Foto con forme diverse nei siti.
- Sezioni con angoli inclinati.
- Sigilli, frecce e fumetti solo con il CSS.
Domande frequenti
Che cos’è clip-path?
È una proprietà CSS che mostra solo la parte di un elemento dentro una forma. L’immagine resta intera nel file; viene nascosto solo ciò che sta fuori dalla forma.
Funziona in tutti i browser?
Sì. polygon(), circle() ed ellipse() funzionano in tutti i browser attuali, senza prefisso.
Si può animare?
Sì, tra due polygon() con lo stesso numero di punti, usando transition o animation su clip-path. I punti si spostano dolcemente da una forma all’altra.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.