CSS Triangle artifacts

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 =  style = "border-top:  solid "></div>

<div id =  style = "border-bottom:  solid ; margin-top: -"></div>