I'm trying to use the CSS property clip-path
, but I get an Invalid property value
error in Chrome.
Here's a small demo:
Note: This is different from this question on clip-path does not work with chrome, because it's specifically asking about how to apply clip path using SVG (not CSS)
According to Can I Use, it should work in chrome.
Turns out I just needed the -webkit-
prefix (although I don't see it in this list of vendor prefixes)
.clip-me { /* top, right, bottom, left */
-webkit-clip-path: inset(0px 50px 50px 0px);
clip-path: inset(0px 50px 50px 0px);
}
<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">
Update as of Chrome 55, clip-path without the vendor prefix is now supported, but many other browsers still require using -webkit-clip-path
so it's safer to include it for now.
Here's a snapshot of CanIUse (as of 2017), with the additional details in the top right corner of partial support browsers often indicating the need for the -webkit-
prefix
Further Reading: