在 Firefox 和 Internet Explorer 中不工作的剪辑路径多边形 css答案

【问题标题】：Clip path polygon css in not working in firefox and internet explorer在 Firefox 和 Internet Explorer 中不工作的剪辑路径多边形 css
【发布时间】：2016-06-28 09:43:33
【问题描述】：

我想从右下角剪切图像，它已经完成，但它在某些浏览器中不起作用。有没有办法做到这一点？

注意：

悬停效果是必须的。

这里是代码。

.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>

谢谢。

【问题讨论】：

标签： html css polygon

【解决方案1】：

简而言之：它在那里不起作用，因为您使用的 CSS 属性不属于他们（Firefox 和 IE）的渲染引擎。

查看问题here 以查看有关它的信息性讨论。要点是：webkit 是一个 Opera 渲染引擎，它也适用于 chrome，因为 chrome 的渲染引擎（Gecko）是基于 webkit 的。

从this css-tricks post 看来，为了获得最好的支持，您应该添加另一个不带 -webkit- 的 css 规则，但 它仍然无法支持所有浏览器（查看最后一段与文章中的浏览器支持摘要）：

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

重申一下：这将不会解决您使用 IE 和 Firefox 的问题，因为它们还不支持 clip-path 属性。你可以see the browser support here。

可能的解决方案

除了在 IE 和 Firefox 中不做任何剪辑之外，您可以在 IE 和 FIrefox 中剪切矩形作为后备 - 为此您可以使用已弃用的

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

看看我上面链接的帖子 - 这是第一件事。正如他在那里写的那样——它是有限的（图像必须绝对定位，你只能将它用于矩形，但它基本上被所有浏览器支持，所以它是一个很好的后备）。因此，如果您可以从中获得后备设计，那就值得了解了。

【讨论】：