Clip-pad - CSS-trucs | CSS Almanac 2025

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.

Deze afbeelding van Louis Lazaris verklaart de vier punten van de **oude `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.