。row中的DIV必须左右延伸边框，以达到全宽

Question

我正在使用Foundation的Zurb框架，并且在行容器内有一个DIV，该行必须具有左右边界以填充可用空间，从而将其变成全角。此相同的DIV已经具有伪类:: before和:: after，以使背景颜色显示为高度的50％，并且它是全角。

@mixin full-width-bg-color {    
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 50%;
    width: 100vw;
    z-index: -1;
}
div[upper-background]::before {
    top: 0;
}
div[lower-background]::after {
    bottom: 0;
}
div[upper-background=bg-light-taupe]::before, div[lower-background=bg-light-taupe]::after {
    @include full-width-bg-color();
    background: $light-taupe;
}
div[upper-background=bg-dark-taupe]::before, div[lower-background=bg-dark-taupe]::after {
    @include full-width-bg-color();
    background: $dark-taupe;
}

我尝试对两个边框（如border-left）进行此设置：calc（（100％-$ global-width）/ 2）稳定的红色；但是它不起作用，因为我对此进行了研究。

<div class="row">
<div upper-background="bg-light-grey" lower-background="bg-dark-taupe"></div>
</div>

这是我到目前为止的内容：https://codepen.io/felipebbtoledo/pen/jOOMmpQ?editors=1100黑色的左右边界应该一直到边缘，而不是100px的宽度（在我的示例中看到），因为窗口的宽度会变化。我唯一的变量是$ global-width，它等于1620px。

Answer 1

如果是纯色，则可以使用多个阴影进行工作

div[upper-background][lower-background]{
    border-left: 100px solid;
    border-right:100px solid;
    box-shadow:  500px 0 , 900px 0, -500px 0 , -900px 0

}

fork：https://codepen.io/gc-nomade/pen/ZEEpJze?editors=1100