Chrome上的剪切路径在边缘留下了一条奇怪的线 [英] Clip-path on Chrome leaves a strange line on the edge

问题描述

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

I use clip-path to create the particular shape of the blue search button.

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

From Chrome you see a strange line at the cutout edge, while from Firefox everything is OK.

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

I am not the first to point this out, but I have not found a solution.

Chrome

Firefox

剪切路径为:

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

这是什么谜?我还发现了类似的问题:

What mystery is this? I also found a similar issue:

CSS-带有Chrome移动功能的奇怪边框剪切路径

推荐答案

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

I had a similar issue where the right edge of a clip path was sitting just inside of 100%. I was able to fix this by setting the right edge x-coordinate values to 101% and adding overflow: hidden; to the parent element.

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

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

I imagine you could do the same on the left side by inputting negative values?

修复前的图像

修复后的图像

这篇关于Chrome上的剪切路径在边缘留下了一条奇怪的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！