Rectangle 27 0

html Clip path polygon css in not working in firefox and internet explorer?


.clip>a>img{
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
    clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
}
.clip>a>img:hover{
    -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.

Note