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

【问题标题】：Clip-path on Chrome leaves a strange line on the edgeChrome上的剪辑路径在边缘留下一条奇怪的线
【发布时间】：2019-01-03 16:34:55
【问题描述】：

我使用 clip-path 来创建蓝色搜索按钮的特定形状。

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

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

铬

火狐

剪辑路径是：

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

这是什么奥秘？我也发现了一个类似的问题：

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我遇到了类似（如果不一样）的问题，我通过将以下样式添加到带有 clip-path 的元素来解决此问题：

 transform: translateZ(0)

【讨论】：