Generator clip-path CSS

Exemple de forme clip-path

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Triunghi Trei puncte: vârful sus la mijloc, colțurile jos.

.element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Romb Câte un punct la mijlocul fiecărei laturi.

.element {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Hexagon Șase puncte; bun pentru avatare și grile de tip fagure.

.element {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Stea Zece puncte, alternând vârfurile exterioare și interioare.

.element {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Săgeată Pentru butoane de tip „pasul următor”.

.element {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

Bulă de mesaj Un dreptunghi cu un colț ascuțit dedesubt.

.element {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Paralelogram Pentru etichete și meniuri înclinate.

.element {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

Margine teșită Secțiune de pagină cu marginea de jos în diagonală.

.element {
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}

Cerc Decupaj rotund, centrat; nu are nevoie de border-radius.

.element {
  clip-path: circle(45% at 50% 50%);
}

Inset rotunjit Un dreptunghi interior cu colțuri rotunjite.

.element {
  clip-path: inset(10% round 16px);
}

Cum folosești generatorul de clip-path

Alege o formă din listă sau tipul de decupare: polygon, circle, ellipse sau inset.
La poligon, trage de punctele albe ca să schimbi forma. Dublu clic pe o latură adaugă un punct; dublu clic pe un punct îl șterge.
La cerc, elipsă și inset, folosește glisoarele din panou.

Cum funcționează clip-path

clip-path ascunde tot ce iese din forma dată. Elementul își păstrează locul în pagină; doar partea vizibilă se schimbă. Coordonatele în procente pornesc din colțul stânga sus (0% 0%) și ajung în colțul dreapta jos (100% 100%).

.triunghi {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.avatar {
  clip-path: circle(50% at 50% 50%);
}

Animarea formei

Două poligoane cu același număr de puncte se pot anima unul în celălalt cu transition: clip-path 0.4s. Dacă numărul de puncte diferă, schimbarea se face brusc.

Întrebări frecvente

De ce border și box-shadow dispar?

Și ele sunt decupate, pentru că se află în afara formei. Pentru o umbră care urmează forma, pune filter: drop-shadow() pe un element părinte.

clip-path afectează clicurile?

Da. Zonele decupate nu mai primesc clicuri, deci un buton în formă de săgeată se poate apăsa doar pe săgeată.