Clip-path - CSS-triki | Almanah CSS 2025

clip-pathHotel v CSS omogoča, da določite določeno regijo element na zaslonu, z ostalo pa skrita (ali "pristrižene") proč.

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

Včasih je bila cliplastnost, vendar upoštevajte, da je zastarela.

Najpogostejši primer uporabe bi bila slika, vendar ni omejena na to. Prav tako lahko uporabite clip-pathoznako odstavka in samo del besedila.

 
 I'll be clipped.

Te štiri vrednosti v inset()(v CSS zgoraj) predstavljajo zgornjo / levo točko in spodnjo / desno točko, ki tvori vidni pravokotnik. Vse zunaj tega pravokotnika je skrito.

Ta podoba Louisa Lazarisa zelo dobro pojasnjuje štiri točke **stare `clip: rect();`sintakse** .

Druge možne vrednosti:

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

Primer poti posnetka SVG:

Zelo čudno je, da clip-pathni podpiral path()funkcije zunaj vrat, saj path()to že velja za lastnosti, kot je motion-path. Firefox ima zdaj podporo zanj in čakamo na ostale brskalnike. Glejte Začetna izvedba clip-path: path ();

Naredi svoje

Dokler ne bomo mogli zanesljivo uporabljati path(), so najbolj uporabne sponke za modne oblike po meri polygon(). Tu je zares urejen urejevalnik za Mads Stoumann (ki deluje tudi za kroge in elipse):

Več informacij

Izrezovanje in maskiranje v CSS
clip-path na WPD
clip-path na MDN
Clippy: Izdelovalec posnetkov poti Bennetta Feelyja
Izrez in maskiranje na MDN
(Zastarela) lastnost izrezka CSS (impresivne spletne strani)
Specifikacije o maskiranju CSS
Maskiranje CSS Dirka Schulzeja
Izrezovanje v CSS in SVG - Lastnost in element posnetka poti avtorice Sara Soueidan
Peresa so na CodePen označila pot posnetka
Predstavitve in podpora za brskalnike demo Pen by Yoksel
SVG Maske Jakoba Jenkova
Raziskava Alana Greenblatta o stopnjah podpore brskalnikov za izrezovanje in maskiranje funkcij

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.