Question

我已经试图修复这个bug好几天了，但我还没有找到一个解决方案。在某些级别的缩放（即使在我的手机上使用默认缩放），我可以看到一些div下面的灰色边框。我一直试图用很多选项解决这个问题，包括：

box-shadow
margin-bottom
outline: none

......以及其他一些我甚至不记得的事情

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

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

Answer 1

我浏览了你的网站（BTW伟大的设计），我想我找到了解决你的问题的方法。您需要在三角形上添加负边距以覆盖空间：

.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

Answer 2

这是你必须要做的：

<style>
.white_triangle {
    width: 0px;
    height: 0px;
    position: absolute;
    border-style: solid;
    border-width: 130px 50vw 0px;
    border-color: cyan transparent transparent;
    position: absolute;
    top: 100%;
    margin-top: -1px;
}
</style>
<div style="background: black; height: 500px;">
    <div style="height: 250px; background: cyan; position: relative">
        <div class="white_triangle"></div>
        content here, below the triangle
    </div>
</div>

div下方不需要的灰色边框（Chrome Android）

2 个答案: