考虑引导列的背景为左，其他背景为右

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，但是最大的问题是考虑到列的情况，容器外部的左右背景

不幸的是响应式的行为不正确，有人知道如何优雅，响应式地执行此操作吗？

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>