Met de clip-patheigenschap in CSS kunt u een specifiek gebied van een element specificeren om weer te geven, terwijl de rest wordt verborgen (of "afgekapt").
.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 */ ) Er was vroeger een clippand, maar houd er rekening mee dat dit verouderd is.
De meest voorkomende use-case is een afbeelding, maar daar is het niet toe beperkt. Je zou net zo gemakkelijk kunnen toepassen clip-pathop een alineatag en slechts een deel van de tekst.
I'll be clipped.
Die vier waarden in inset()(in de CSS hierboven) vertegenwoordigen het punt bovenaan / links en het punt onderaan / rechts , dat de zichtbare rechthoek vormt. Alles buiten die rechthoek is verborgen.
clip: rect();syntaxis heel goed.
Andere mogelijke waarden:
.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%); )Voorbeeld SVG-clippad:
Het is heel raar dat clip-pathhet de path()functie niet uit de poort ondersteunde, omdat het path()al iets is voor eigenschappen zoals motion-path. Firefox heeft er nu echter ondersteuning voor en we wachten op de rest van de browsers. Zie Een eerste implementatie van clip-path: path ();
Maak je eigen
Totdat we betrouwbaar kunnen gebruiken path(), zijn de handigste clips voor mooie aangepaste vormen polygon(). Hier is een heel handige editor voor die van Mads Stoumann (die ook werkt voor cirkels en ellipsen):
Meer informatie
- Knippen en maskeren in CSS
- clip-path op WPD
- clip-path op MDN
- Clippy: Bennett Feely's maker van clips
- Knippen en maskeren op MDN
- De (verouderde) CSS Clip-eigenschap (indrukwekkende websites)
- Specificatie voor CSS-maskering
- CSS-maskering door Dirk Schulze
- Clipping in CSS en SVG - The clip-path Property and Element door Sara Soueidan
- Pennen getagd met clip-path op CodePen
- Demo's en browserondersteuning demo Pen van Yoksel
- SVG-maskers door Jakob Jenkov
- Alan Greenblatt's onderzoek naar browserondersteuningsniveaus voor knippen en maskeren
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 91 | 54 | Nee | 88 | TP * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 * |
