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

Question

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

box-shadow
margin-bottom
outline: none

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

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

完整的代码可以在这里找到: https://noobish.eu/beta/

Answer 1

我浏览了您的网站(BTW 很棒的设计)，我想我找到了解决您问题的方法。您需要为三 Angular 形添加负边距以覆盖空间:

.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