Question

我使用剪切路径来创建蓝色搜索按钮的特定形状。

在Chrome浏览器中，您会在切口边缘看到一条奇怪的行，而在Firefox中，一切正常。

我不是第一个指出这一点的人，但是我没有找到解决方法。

Chrome

Firefox

剪切路径为：

clip-path: polygon(0 0, 0 100%, 15px 50%);

这是什么谜？我还发现了类似的问题：

Answer 1

我遇到类似的问题，即剪切路径的右边缘刚好位于100％的内部。我可以通过将右边缘的x坐标值设置为101％并将overflow: hidden;添加到父元素来解决此问题。

clip-path: polygon(0 0, 101% 0, 101% 80%, 0 100%);

我想您可以通过输入负值在左侧执行相同的操作？

Answer 2

我有一个类似的问题（如果不是相同的话），我通过使用clip-path向元素添加以下样式来解决此问题：

 transform: translateZ(0)