Generatore di CSS Clip-path
Il generatore di clip-path CSS produce valori clip-path per le forme più comuni (triangolo, freccia, pentagono, esagono, stella, chevron, cerchio, ellisse e inset arrotondato) con anteprima in tempo reale.
Informazioni su questo strumento
Il generatore di clip-path CSS produce valori clip-path per le forme più comuni (triangolo, freccia, pentagono, esagono, stella, chevron, cerchio, ellisse e inset arrotondato) con anteprima in tempo reale.
Come si usa
- Scegli una forma dall'elenco.
- Scegli un colore di riempimento per l'anteprima.
- Clicca Copy CSS e applica il clip-path a qualsiasi elemento o immagine.
Da sapere
- clip-path nasconde tutto ciò che si trova fuori da una forma, quindi non servono maschere immagine o file SVG.
- polygon() accetta un elenco di punti x y in percentuale, che si adatta all'elemento.
- circle(50% at 50% 50%) ritaglia un elemento in un cerchio centrato.
- inset() con round aggiunge angoli arrotondati a un ritaglio rettangolare.
- Le forme di base di clip-path sono supportate da tutti i principali browser attuali.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Come ritaglio un'immagine con una forma in CSS?
Applica un clip-path all'immagine, per esempio clip-path: polygon(50% 0%, 0% 100%, 100% 100%); per un triangolo.
Che differenza c'è tra clip-path e mask?
clip-path ritaglia una forma vettoriale dai bordi netti. mask usa un'immagine o un gradiente e può creare bordi sfumati e parzialmente trasparenti.
Si può animare clip-path?
Sì, se entrambe le forme usano la stessa funzione e lo stesso numero di punti, il browser può creare una transizione tra le due.
clip-path influisce sui clic?
Sì. Le aree al di fuori della forma ritagliata non vengono visualizzate e non ricevono eventi del puntatore.