-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
clip: rect(10px, 20px, 30px, 40px);
Apart from not doing any clipping in IE and Firefox, you can cut rectangular shape as a fallback in IE and FIrefox - for that you can use the deprecated
From looking at this css-tricks post it seems that to get the best support you should add another css rule without the -webkit-, but it would still not have support across all browsers (look at the final paragraph with the browser-support summary in the post):
In short: it doesn't work there because you are using CSS properties that don't belong to their (Firefox's and IE's) rendering engine.
Just to reiterate: this will not fix your problem with IE and Firefox, as they just don't support the clip-path property yet. You can see the browser support here.
Look at the question here to see an informative discussion about it.
The gist is: webkit is an Opera rendering engine, and it works in chrome as well because chrome's rendering engine (Gecko) is based on webkit.
Look in the post I linked above - it's the first thing there. As he writes there- it's limited (the image has to be absolutely positioned and you can only use it for rectangles, but it is basically supported by all browsers so it's a good fall-back). So if you can get a fallback-design from that it's worth knowing.