Clip-path - CSS-trükkök

A clip-pathCSS tulajdonság lehetővé teszi, hogy megadjon egy adott elem megjelenítendő régióját, a többit elrejtve (vagy „levágva”).

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

Korábban volt egy cliptulajdonság, de vegye figyelembe, hogy elavult.

A leggyakoribb használati eset egy kép lenne, de ez nem korlátozódik erre. Ugyanolyan könnyen alkalmazható clip-pathegy bekezdéstagra és csak a szöveg egy részére.

 
 I'll be clipped.

Ez a négy érték inset()(a fenti CSS-ben) a felső / bal és az alsó / jobb pontot jelenti, amely a látható téglalapot alkotja. A téglalapon kívül minden rejtve van.

Egyéb lehetséges értékek:

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

Példa SVG klip elérési útjára:

Nagyon furcsa, clip-pathhogy nem támogatta a path()funkciót a kapun kívül, mivel path()ez már olyan dolog, mint a tulajdonságok motion-path. A Firefox azonban most már támogatja ezt, és várjuk a többi böngészőt. Lásd: A clip-path: path () kezdeti megvalósítása;

Csináld meg a sajátod

Amíg nem tudjuk megbízhatóan használni path(), a leghasznosabb klipek a divatos egyedi alakzatokhoz az polygon(). Itt van egy igazán ügyes szerkesztő azok számára, akik Mads Stoumann-tól származnak (amely körökhöz és ellipszisekhez is használható):

Több információ

• Nyírás és maszkolás a CSS-ben
• clip-path a WPD-n
• clip-path az MDN-n
• Clippy: Feely Bennett klip-készítője
• Nyírás és maszkolás az MDN-en
• A (megszűnt) CSS-klip tulajdonság (lenyűgöző webek)
• Specifikáció a CSS maszkolásról
• Dirk Schulze CSS-maszkolása
• CSS és SVG nyírás - Sara Soueidan tulajdonsága és eleme
• Tollak clip-path-el címkézve a CodePen-en
• A demók és a böngésző támogatja a Yoksel Pen bemutatót
• Jakob Jenkov SVG maszkjai
• Alan Greenblatt kutatása a böngésző támogatási szintjeiről a nyírási és maszkolási funkciókhoz

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm	Firefox	AZAZ	Él	Szafari
91.	54.	Nem	88	TP *

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81.	14,0–14,4 *