考虑引导列的背景左侧和其他背景右侧[重复]

Question

这就是我要做的：

我不知道如何才能实现这一点。以前的方法如下：

nav{
    background-image: -webkit-linear-gradient(156deg, #83817e 31%, #504e4b 31%);
    height: 50px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
      <nav>
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                  Left
                </div>
                <div class="col-sm-3">
                  Right
                </div>
            </div>
        </div>
    </nav>

我也尝试使用 after an before，但最大的问题是考虑到列的容器外部左右的背景

不幸的是，响应式的行为不正确，有人知道如何优雅地响应式地做到这一点？

Answer 1

您可以使用伪元素来添加除数。设置左侧为一种颜色，右侧为另一种颜色。然后，伪元素将包含实际的渐变。

nav{
    width: 100%;
    height: 30px;
}

nav .left {
 background-color: #504e4b;
 
}

nav .left::after {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 100%;
  background-color: red;
  right: 0;
  background-image: -webkit-linear-gradient(156deg, #83817e 46%, white 46%, white 54%, #504e4b 54%);
}

nav .right {
  background-color: #83817e;
}

.row, .container, .right, .left {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col left"></div>
            <div class="col-sm-3 col right"></div>
        </div>
    </div>
</nav>