CSS Triangle工件

Question

使用找到here的提示，我通过在彩色矩形上方放置一个三角形成功地实现了“倾斜”div，但是我遇到了一些奇怪的文物（见下文）。

注意彩色部分上方的细线 - 就像三角形放得太低一样。我经常使用10vh或10%，这可能会引入具有不可分割的屏幕/ div高度的舍入错误，但这是推测。

是什么导致了这个问题，我该怎么做才能解决它？

三角CSS

& {
    width: 0;
    height: 0;
    border-style: none;
}

#container {
    width: 100%;
    position: absolute;
    z-index: 1;
}

#top-left {
    border-right: 100vw solid transparent;
}

#top-right {
    border-left: 100vw solid transparent;
}

#bottom-left {
    border-right: 100vw solid transparent;
}

#bottom-right {
    border-left: 100vw solid transparent;
}

当我创建三角形时，我指定border-top或border-bottom，并指定相应的负边距。在上面的例子中，高度是50px：

<div id = {{attr.direction}} style = "border-top: {{attr.height}} solid {{attr.color}}"></div>

<div id = {{attr.direction}} style = "border-bottom: {{attr.height}} solid {{attr.color}}; margin-top: -{{attr.height}}"></div>

的jsfiddle

可以在this JSFiddle中观察，而不是通过调整视图窗格的大小，而是通过在开发人员选项中选择响应式视图，以及更改屏幕大小。要在chrome中执行此操作，请右键单击＆gt;检查＆gt;响应（来自下拉）。然而，这不仅仅是开发人员选项中的一个小故障，因为它在真实的移动设备上被观察到。请注意下图中的红色轮廓。