Lõiketee - CSS-trikid | CSS-i almanahh 2025

clip-pathVara CSS võimaldab määrata konkreetse piirkonna elemendi ekraan, kusjuures ülejäänut peidetud (või "kärbitud") kaugusel.

.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 */ )

Varem oli clipatribuut, kuid pange tähele, et see on aegunud.

Kõige tavalisem kasutusjuht oleks pilt, kuid see ei piirdu sellega. Sama hõlpsalt võiksite rakendada clip-pathka lõikemärgendit ja ainult osa tekstist.

 
 I'll be clipped.

Need neli väärtust inset()(ülaltoodud CSS-is) tähistavad ülemist / vasakut ja alumist / paremat punkti, mis moodustavad nähtava ristküliku. Kõik väljaspool seda ristkülikut on peidetud.

See Louis Lazarise pilt selgitab väga hästi **vana `clip: rect();`süntaksi** nelja punkti .

Muud võimalikud väärtused:

.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%); )

Näide SVG klipi rajast:

See on väga imelik, et clip-pathsee ei toetanud path()väravast väljuvat funktsiooni, kuna see path()on juba selliste omaduste asi motion-path. Firefoxil on selle jaoks praegu siiski tugi ja me ootame ülejäänud brausereid. Vaadake jaotist Clip-path: path () esmane rakendamine;

Tee endale

Kuni me ei saa seda usaldusväärselt kasutada path(), on väljamõeldud kohandatud kujundite jaoks kõige kasulikum klipp polygon(). Siin on tõesti korralik redaktor neile, kes on pärit Mads Stoumanni juurest (mis sobib ka ringide ja ellipside jaoks):

Rohkem informatsiooni

Lõikamine ja maskeerimine CSS-is
clip-path WPD-s
lõiketee MDN-is
Clippy: Bennett Feely klippide tegija
Lõikamine ja maskeerimine MDN-il
(Vananenud) CSS-i klipi atribuut (muljetavaldavad veebisaidid)
CSS-i maskeerimise spetsifikatsioon
Dirk Schulze CSS-i maskeerimine
CSS-i ja SVG-i lõikamine - Sara Soueidani klippitee Property ja Element
Pliiatsid, millel on koodiribal sildistatud klipi tee
Demod ja brauserid toetavad Yokseli pliiatsi Pen Pen
Jakob Jenkovi SVG maskid
Alan Greenblatti uurimine klõpsamise ja maskeerimise funktsioonide brauseri tugitasemete kohta

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.