Klipo kelias - CSS-gudrybės | CSS almanachas 2025

clip-pathCSS nuosavybė leidžia jums nurodyti konkretų regioną elemento į ekraną, o likusi dalis yra paslėpta (ar "nukirpti") atstumu.

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

Anksčiau buvo clipnuosavybė, tačiau atkreipkite dėmesį, kad tai nebenaudojama.

Dažniausias naudojimo atvejis būtų vaizdas, tačiau tuo neapsiribojama. Lygiai taip pat lengvai clip-pathgalėtumėte pritaikyti pastraipos žymą ir tik dalį teksto.

 
 I'll be clipped.

Šios keturios inset()(CSS viršuje) reikšmės reiškia viršutinį / kairįjį tašką ir apatinį / dešinįjį tašką, kuris sudaro matomą stačiakampį. Viskas už to stačiakampio yra paslėpta.

Šis Louis Lazaris vaizdas labai gerai paaiškina **senosios `clip: rect();`sintaksės** keturis taškus .

Kitos galimos vertės:

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

SVG klipo kelio pavyzdys:

Labai keista, kad clip-pathnepalaikė path()funkcijos už vartų, nes path()tai jau yra dalykas tokioms savybėms kaip motion-path. Vis dėlto „Firefox“ dabar palaiko jį ir mes laukiame kitų naršyklių. Žr. Pradinį klipo kelio įgyvendinimą: kelias ();

Pasidaryk savo

Kol negalėsime patikimai naudoti path(), yra naudingiausi įmantrių pasirinktinių formų klipai polygon(). Čia yra tikrai tvarkingas redaktorius tiems iš Mads Stoumann (kuris taip pat tinka apskritimams ir elipsėms):

Daugiau informacijos

Karpymas ir maskavimas CSS
klipų kelias WPD
įrašo kelias MDN
„Clippy“: Bennetto Feely klipų kūrėjas
Iškirpti ir užmaskuoti MDN
(Nebenaudojama) CSS klipo ypatybė (įspūdingi žiniatinkliai)
Specifikacija CSS maskavimui
Dirk Schulze CSS maskavimas
Karpymas CSS ir SVG - Sara Soueidan klipo kelias „Property and Element“
Rašikliai, pažymėti klipo keliu „CodePen“
Demonstracijos ir naršyklė palaiko „Yoksel“ rašomąją „Pen“ versiją
Jakobo Jenkovo „SVG kaukės“
Alano Greenblatto tyrimai apie naršyklės palaikymo lygius karpymo ir maskavimo funkcijoms

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.