CSS Triangle artifacts - html

Question

Using the tips found here, I successfully achieved a "slanted" div by placing a triangle overtop of an colored rectangle, however I am experiencing some strange artifacts (see below).
Notice the thin line above the colored section - it is as if the triangle is placed too low. I often use 10vh or 10%, which could introduce rounding errors with non-divisible screen/div heights, but that is speculation.
What causes this issue, and what can I do to fix it?
Triangle 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;
}
When I create a triangle, I specify either the border-top or border-bottom, with a corresponding negative margin. In the case above, the height was 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
It can be observed in this JSFiddle, not by resizing the view pane but by choosing a responsive view in developer options, and changing the screen size. To do this in chrome, right click > Inspect > Responsive (from drop down). This is not merely a glitch in the developer options, however, as it is observed on real mobile devices. Notice the thin red outline in the image below.