clip-path | CSS-Tricks

The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away.
There used to be a clip property, but note that is deprecated.
The most common use case would be an image, but it’s not limited to that. You could just as easily apply clip-path to a paragraph tag and only a portion of the text.
Those four values in inset() (in the CSS above) represent the top/left point and the bottom/right point, which forms the visible rectangle. Everything outside of that rectangle is hidden.
Other possible values:
Example SVG clip path:
The clip-path property also supports the path() function, which makes clipping elements into shapes extremely easy. The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.
Here’s a really neat editor for those from Mads Stoumann (which works for circles and ellipses as well):
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Hey, glad you liked the image. :)
Just a quick correction. You said:
“The spec says to use commas to separate the values. IE 4-7 support this property, only without the spaces.”
I think you meant to say “…only without the commas” or “…only with spaces”.
“Those four values represent the “top/left” point and the “bottom/right” point, which forms the visible rectangle. Everything outside of that rectangle is hidden.”
I think that “top/left” should be “top/right” and “bottom/right” should be “bottom/left”.
Learn something new everyday :P
One note is that the commas should actually be avoided if you are supporting legacy versions of IE. Using a space to delineate the T R B L will work cross-browser.
BTW: We are huge fans of css-tricks here at Noble Desktop. Thanks for doing your thing!
Great article! Any idea about support on iOS. I’m using a 2nd Generation iPod Touch running iOS 4.2.3, but see no clip effect. Adding a -webkit- prefix does nothing, it seems. Any ideas?
Can I Use points to no IE support. What happened here?
The browser was shut down. So its effectively useless.
iOS 8 Safari doesn’t seem to support animated clip-paths, as I discovered while using velocity.js.
This is pretty cool, but it doesn’t seem to work on the video tag. How might I make this effect on the video tag? I’ve asked this question on StackOverflow.
Unfortunately they keep moving the goalposts and this article fails to indicate the before and after syntax which I think is very impotant if you want your clips to work in all browser versions.
I know that my v34 clips below work but I’m struggling to get the new v35s to work so any help would be appreciated:
I’m also interested in this article, I’ll be following but I don’t expect there to be many updates. As clip is now gone and clip-path only has partial support I’m curious as to any other ways to replicate this behavior or are we going to be stuck waiting for better browser support implementation (I really hope not).
it’s not validate for w3cvalidator, error like this Property clip-path doesn’t exist
.our-genius .style1 { float:left; position: relative; /Chrome,Safari/ -webkit-clip-path: polygon(0px 424px,491px 500px,415px 0px,0px 0px); -ms-clip-path: polygon(0px 424px,491px 500px,415px 0px,0px 0px); /Firefox/ clip-path: url(“index.html#clipPolygon1”); -moz-clip-path: url(“index.html#clipPolygon1”); -moz-clip-path: polygon(0px 424px,491px 500px,415px 0px,0px 0px); }
Hi. It’s work for swf content? It tried this for images but flash content is not clipped
clip-path ONLY works with a prefix in Webkit.. Perhaps such should be incorporated into this here article…
Also, the CSS implementation in most Browser is HIGHLY erratic and I suggest anyone that contemplates using Clipping in CSS – do it by simple wrapping the image or element in a surrounding DIV and setting THAT to overflow hidden and thus adjusting the DIV’s (which IS a rectangle) dimensions…
This works every time – in every browser….
Clip and clip-path IMPO should be avoided. At least until the people fumbling about with building web-browser, unite and agree…
Once again, a great proposition goes berserk !
I put together a little demo of three different clipping techniques. Have a look at mattias.pw/pens/2016/08/08/clipping-101/.
nice little demo there! Also thanks for reminding me about this article. Sadly clip-path hasn’t progressed anywhere near to where I’d wanted it to have by now. Coincidentally I’m working on a site currently where this would have been incredibly useful. Sadly I’ll have to result to SVG’s, maybe one day soon!
Hi there! Should I have to agree the -o- and -moz- prefix to make it work in non -webkit- browsers?
@keyframes rotacion-electrica { -webkit-transition-timing-function: linear; transition-timing-function: linear; from { -webkit-clip-path: circle(60% at 50% 50%); clip-path: circle(60% at 50% 50%); opacity: 0.9; } to { -webkit-clip-path: circle(60% at 50% 50%); -webkit-transform:rotate(0deg); clip-path: circle(60% at 50% 50%); transform: rotate(360deg); opacity: 1; } }
Jean Phillip http://www.iliiet.com/portal