`clip-path (circle, ellipse, polygon, inset, path)` în CSS

Tranziții și Animații CSS3+ (path(): Chrome 88, Firefox 71, Safari 13.1)

Decupează un element după o formă (cerc, elipsă, poligon, dreptunghi): tot ce iese din formă devine invizibil.

Sintaxă CSS

clip-path: circle(50% at 50% 50%);
clip-path: ellipse(60% 40% at center);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
clip-path: inset(10px 20px round 12px);
clip-path: path("M 0 0 L 100 0 L 50 80 Z");

Ce face `clip-path (circle, ellipse, polygon, inset, path)`

clip-path definește o zonă de decupare: partea din element aflată în interiorul formei rămâne vizibilă, iar restul nu se mai desenează. Elementul își păstrează locul în pagină, la fel ca înainte de decupare.

Formele de bază sunt funcții: circle(), ellipse(), polygon() (o listă de puncte x y), inset() (un dreptunghi tras spre interior, cu colțuri rotunjite prin round) și path() (un traseu în format SVG, în pixeli).

Valorile clip-path se pot anima cu transition sau animation dacă cele două stări folosesc aceeași funcție (iar la polygon(), același număr de puncte). Zonele decupate nu mai primesc clicuri.

Valori uzuale

Valoare	Descriere
`circle(raza at x y)`	Cerc cu raza dată, centrat în punctul x y (implicit în centru).
`ellipse(rx ry at x y)`	Elipsă cu două raze diferite, pe orizontală și pe verticală.
`polygon(x1 y1, x2 y2, ...)`	Poligon din puncte; fiecare pereche e o coordonată (procente sau pixeli).
`inset(sus dreapta jos stânga round r)`	Dreptunghi micșorat față de margini, opțional cu colțuri rotunjite.
`path("...")`	Formă liberă descrisă cu comenzi SVG (M, L, C, Z); coordonatele sunt în pixeli.
`none`	Fără decupare (valoarea implicită).

Exemple

Exemplul 1: Fotografie de profil decupată în cerc

Imaginea pătrată a Anei devine rotundă fără a modifica fișierul.

.avatar-ana {
  width: 120px;
  height: 120px;
  object-fit: cover;
  clip-path: circle(50%);
}

Efect vizual în browser

Fotografia de 120 × 120 px apare ca un cerc perfect; colțurile pătratului nu se mai văd.

Exemplul 2: Banner cu margine de jos oblică și dezvăluire animată

Poligonul are aceleași 4 puncte în ambele stări, așa că tranziția funcționează.

.banner-iasi {
  background: #2563eb;
  color: white;
  padding: 48px 24px 80px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s ease;
}
.banner-iasi:hover {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}