css - Chrome上的剪辑路径在边缘留下一条奇怪的线

Question

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

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

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

铬合金

火狐

剪辑路径是：

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

这是什么玄机？我还发现了一个类似的问题：

CSS - 带有剪辑路径的 Chrome 移动设备上出现奇怪的边框

标签： cssgoogle-chromeclip-path

Answer 1

我有一个类似的问题，剪辑路径的右边缘正好位于 100% 以内。我可以通过将右边缘 x 坐标值设置为 101% 并添加overflow: hidden;到父元素来解决此问题。

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

我想你可以通过输入负值在左侧做同样的事情吗？

修复前的图像

修复后的图像