Question

我想从右下角剪切图像并完成，但它在某些浏览器中无效。有没有办法做到这一点？

注意：

悬停效果是必要的。

这是代码。

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢。

Answer 1

简而言之：它不能在那里工作，因为您使用的CSS属性并不属于他们的（Firefox和IE＆＃39; s）渲染引擎。

查看问题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);

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

剪辑路径多边形css不在firefox和Internet Explorer中工作

1 个答案:

可能的解决方案