CSS Clip-Path Maker
Trascina i punti sul canvas per modellare il clip-path. Scegli preset, cambia modalità, copia il CSS.
① Scegli un preset o trascina le maniglie ② Passa tra polygon, circle ed ellipse ③ Copia il CSS
Preset formeModalità
Output CSS
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
Cos'è CSS clip-path?
La proprietà CSS clip-path crea una regione di ritaglio che controlla quale parte di un elemento è visibile. Con polygon() si definisce una serie di coordinate percentuali che formano una forma chiusa. circle() ed ellipse() consentono ritagli circolari o ovali. clip-path è completamente accelerato hardware e può essere animato con transizioni CSS.
Domande Frequenti
clip-path è una proprietà CSS che limita l'area visibile di un elemento a una forma definita. Solo i pixel dentro la regione di ritaglio vengono renderizzati; il resto diventa trasparente. È usato per tagli creativi, maschere immagine, rivelazioni di forme e transizioni animate.
Ogni coppia di valori in polygon() è una coordinata (x%, y%) relativa al bounding box dell'elemento. (0% 0%) è l'angolo in alto a sinistra, (100% 100%) in basso a destra. Puoi usare qualsiasi numero di punti per definire poligoni complessi.
polygon() accetta qualsiasi numero di coppie di coordinate e crea forme con bordi retti. circle(r at cx cy) crea un ritaglio circolare. ellipse(rx ry at cx cy) crea un ritaglio ovale. Tutti e tre accettano valori percentuali relativi alle dimensioni dell'elemento.
clip-path può essere transizionato tra due valori polygon() con lo stesso numero di punti: .el { clip-path: polygon(...); transition: clip-path 0.5s ease; } .el:hover { clip-path: polygon(...); }. Il browser interpola ogni coppia di coordinate.
clip-path con polygon(), circle() ed ellipse() è supportato completamente in Chrome, Edge, Firefox e Safari senza prefissi. Il supporto globale supera il 97%.
Usi comuni: divisori di sezione diagonali, gallerie immagini con maschere esagonali o diamantate, rivelazioni animate dell'hero, overlay video a forma di mockup dispositivo, regioni di mappa interattive.
CSS clip-path si applica direttamente agli elementi HTML con semplici funzioni di forma ed è facile da animare. SVG <clipPath> è definito nel markup SVG e referenziato via clip-path: url(#id). SVG supporta percorsi complessi e testo come maschere.