{"id":14041,"date":"2011-09-05T20:38:39","date_gmt":"2011-09-06T03:38:39","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14041"},"modified":"2020-11-27T11:26:37","modified_gmt":"2020-11-27T19:26:37","slug":"clip-path","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/clip-path\/","title":{"rendered":"clip-path"},"content":{"rendered":"\n

The clip-path<\/code> property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away. <\/p>\n\n\n\n

.clip-me {  \n  \n  \/* Example: clip away the element from the top, right, bottom, and left edges *\/\n  clip-path: inset(10px 20px 30px 40px); \/* or \"none\" *\/\n  \n  \/* Example: clip element into a Heptagon *\/\n  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);\n\n\n  \/* Deprecated version *\/\n  position: absolute; \/* absolute or fixed positioning required *\/\n  clip: rect(110px, 160px, 170px, 60px); \/* or \"auto\" *\/\n  \/* values descript a top\/left point and bottom\/right point *\/\n} <\/code><\/pre>\n\n\n\n
There used to be a clip<\/code> property, but note that is deprecated<\/a>.<\/p>\n\n\n\n
The most common use case would be an image, but it’s not limited to that. You could just as easily apply clip-path<\/code> to a paragraph tag and only a portion of the text.<\/p>\n\n\n\n
<img class=\"clip-me\" src=\"\/images\/image-to-be-clipped.png\" alt=\"Descriptioin of image\">\n\n<p class=\"clip-me\">\n  I'll be clipped.\n<\/p><\/code><\/pre>\n\n\n\n
Those four values in inset()<\/code> (in the CSS above) represent the top\/left<\/strong> point and the bottom\/right<\/strong> point, which forms the visible rectangle. Everything outside of that rectangle is hidden.<\/p>\n\n\n\n
\"clip-visual\"
This image by Louis Lazaris<\/a> explains the four point of the old clip: rect();<\/code> syntax<\/strong> very well.<\/figcaption><\/figure>\n\n\n\n
Other possible values:<\/p>\n\n\n\n
.clip-me { \n\n  \/* referencing path from an inline SVG  *\/\n  clip-path: url(#c1); \n\n  \/* referencing path from external SVG *\/\n  clip-path: url(path.svg#c1);\n\n  \/* polygon *\/\n  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);\n\n  \/* circle *\/\n  clip-path: circle(30px at 35px 35px);\n\n  \/* ellipse *\/\n  clip-path: ellipse(65px 30px at 125px 40px);\n\n  \/* inset-rectangle() may replace inset() ? *\/\n  \/* rectangle() coming in SVG 2 *\/\n\n  \/* rounded corners... not sure if a thing anymore *\/\n  clip-path: inset(10% 10% 10% 10% round 20%, 20%);\n\n}<\/code><\/pre>\n\n\n\n
Example SVG clip path:<\/p>\n\n\n\n
<clipPath id=\"clipping\">\n  <circle cx=\"150\" cy=\"150\" r=\"50\" \/>\n  <rect x=\"150\" y=\"150\" width=\"100\" height=\"100\" \/>\n<\/clipPath><\/code><\/pre>\n\n\n\n
It’s very weird that clip-path<\/code> didn’t support the path()<\/code> function out of the gate, since path()<\/code> is already a thing for properties like motion-path<\/code><\/a>. Firefox has support for it now though, and we’re waiting for the rest of the browsers. See An Initial Implementation of clip-path:\u00a0path();<\/a><\/p>\n\n\n
Make Your Own<\/h3>\n\n\n
Until we can reliably use path()<\/code>, the most useful clips for fancy custom shapes is polygon()<\/code>. Here’s a really neat editor for those from Mads Stoumann (which works for circles and ellipses as well):<\/p>\n\n\n\n