Chrome 中的剪辑路径水平白线

Question

在带有背景图像的 div 上设置剪辑路径。在 Chrome 中，水平白线会穿过 div/背景图像。有谁知道怎么去掉吗？

见截图：

这也是课程页面的链接 https://www.sunderland.ac.uk/study/health-paramedic-clinical-sciences/undergraduate-biomedical-science/#facilities

Answer 1

最近遇到了同样的问题。我用白线在边缘添加了

-1px

边距 。

.clipped-box {
  clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 60px, 100% 100%, 0 100%);
  margin-bottom: -1px;
}

我在尝试使用剪贴蒙版堆叠两个部分时遇到了这个问题。顶部部分的底部有白线。所以我把下一部分拉进去。

Answer 2

此问题之前已被发现，请参阅

Chrome 上的 Clip-path 在边缘留下奇怪的线条 和 CSS - 带有 Clip-path 的 Chrome 移动设备上出现奇怪的边框

这似乎是 Chrome 渲染错误。

对于您的情况，我可以通过设置多边形容器的高度来使线条消失：

.course_page #facilities .facility--menu {
    clip-path: polygon(0 0,100% 5%,100% 95%,0 100%);
    height: 25em;
}

高度仅比现在高一点点。

我测试过的其他 CSS 属性似乎对线路没有影响。

Answer 3

尝试将

transform: scaleZ(1)

 应用于带有 

clip-path

 的元素。不知道为什么 Chrome 会发生这种情况，即使是 7 年后，也不知道为什么这个黑客修复了它。感谢这个

Q&A。