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:
推荐答案
我遇到了类似的问题,即剪辑路径的右边缘刚好位于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屋!