Clip-path - CSS-Tricks | Almanah CSS 2025

clip-pathProprietatea în CSS vă permite să specificați o anumită regiune a unui element de afișare, cu restul fiind ascunse (sau „decupaje“) departe.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Exista o clipproprietate, dar rețineți că este învechită.

Cel mai frecvent caz de utilizare ar fi o imagine, dar nu se limitează la asta. Puteți aplica clip-pathla fel de ușor o etichetă de paragraf și doar o porțiune din text.

 
 I'll be clipped.

Aceste patru valori din inset()(în CSS de mai sus) reprezintă punctul de sus / stânga și punctul de jos / dreapta , care formează dreptunghiul vizibil. Totul în afara acelui dreptunghi este ascuns.

Această imagine de Louis Lazaris explică patru punctul de **vechi `clip: rect();`sintaxa** foarte bine.

Alte valori posibile:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Exemplu de cale de clip SVG:

Este foarte ciudat că clip-pathnu a acceptat path()funcția din poartă, deoarece path()este deja un lucru pentru proprietăți precum motion-path. Cu toate acestea, Firefox are suport pentru acesta și așteptăm restul browserelor. Vedeți o implementare inițială a clip-path: path ();

Fă-ți propriul

Până când putem folosi în mod fiabil path(), cele mai utile clipuri pentru forme personalizate fanteziste sunt polygon(). Iată un editor foarte elegant pentru cei de la Mads Stoumann (care funcționează și pentru cercuri și elipse):

Mai multe informatii

Decupare și mascare în CSS
clip-path pe WPD
clip-path pe MDN
Clippy: creatorul de trasee de clip Bennett Feely
Decupare și mascare pe MDN
Proprietatea (depreciată) Clip CSS (Web-uri impresionante)
Specificații despre mascare CSS
CSS Masking de Dirk Schulze
Decupare în CSS și SVG - Proprietatea și elementul clip-path de Sara Soueidan
Pixuri etichetate clip-path pe CodePen
Demonstrațiile și browserul acceptă demo Pen de la Yoksel
Măști SVG de Jakob Jenkov
Cercetările lui Alan Greenblatt privind nivelurile de suport ale browserului pentru funcții de tăiere și mascare

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.