div 下方不需要的灰色边框 (Chrome Android)

Question

几天来我一直在尝试修复这个错误，但我没有找到一个单一的解决方案。在某些级别的缩放（即使在我的 phone 上使用默认缩放）我可以看到一些 div 下面的灰色边框。我一直在尝试使用很多选项来解决这个问题，包括：

box-shadow
margin-bottom
outline: none

...还有其他一些我什至不记得了

问题可以在这里看到。 PICTURE LINK 它在三角形的顶部可见。

完整代码可在此处获得： https://noobish.eu/beta/

Answer 1

我浏览了您的网站（顺便说一句，设计很棒），我想我找到了解决您问题的方法。您需要为三角形添加负边距以覆盖 space:

.white_triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 130px 50vw 0 50vw;
    border-color: white transparent transparent transparent;
    margin-top: -5px; /* Here's the addition */
}

更新：

margin-top 的解决方案似乎有问题，所以我找到了另一个解决方案，它需要在边框顶部添加一个 before 元素。这是代码：

.white_triangle_container:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 8px;
    background: #fff;
    margin-top: -4px;
    border-radius: 0 0 50% 50%;
}

这是它的样子：https://i.gyazo.com/25db9e4b9db16c42d374cfd78b47736d.png

div 下方不需要的灰色边框 (Chrome Android)

Unwanted grey borders below divs (Chrome Android)

html

css

android

google-chrome

border