【发布时间】：2020-01-23 06:44:46
【问题描述】：
在带有背景图像的 div 上设置了剪辑路径。在 Chrome 中，水平白线穿过 div / 背景图像。有谁知道怎么去掉这个？
【问题讨论】：
标签： css google-chrome clip-path
【发布时间】：2020-01-23 06:44:46
【问题描述】：
以前发现过这个问题，见Clip-path on Chrome leaves a strange line on the edge和CSS - Strange border appearing on Chrome mobile with clip-path
这似乎是一个 Chrome 渲染错误。
对于您的情况，我可以通过为您的多边形容器设置高度来使线条消失：
.course_page #facilities .facility--menu {
clip-path: polygon(0 0,100% 5%,100% 95%,0 100%);
height: 25em;
}
高度仅比当前略高。
我测试过的其他 CSS 属性似乎对这条线没有影响。
【讨论】：
-
这将是使用高度的一个很好的修复，但是不同选项卡下的文本具有不同的长度，因此 div 会切断文本。
最近遇到了同样的问题。我在白线边缘添加了-1px 边距。
.clipped-box {
clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 60px, 100% 100%, 0 100%);
margin-bottom: -1px;
}
我在尝试使用剪贴蒙版堆叠两个部分时遇到了这个问题。顶部有底部的白线。所以我把下一部分拉进去了。
【讨论】：