CODEWITHSUNDEEP
htmlcsspolygon
Vishal Panara
Vishal Panara

Reputation: 766

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

I wan to cut image from right bottom and it is done but its not working in some browser. Is there any way to do this?

NOTE:

Hover effect is necessary.

Here is the code.

.clip>a>img{
	-webkit-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%);
}
<html>

<head>
  <title></title>
</head>


<body>
<div class="clip">
<a href="#">
<img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg">
</a>
</div>
</body>

</html>

Thank you.

Upvotes: 0

Views: 6638

Answers (1)

et_l
et_l

Reputation: 1908

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.

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.

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):

.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%);
}

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.

Possible solution

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 

clip: rect(10px, 20px, 30px, 40px);

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.

Upvotes: 2

Related Questions