<分区>
html - 考虑引导列的左侧背景和其他右侧背景
这就是我要做的:
我不知道如何实现这一点。以前的方法如下:
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 和 before，但最大的问题是考虑到列，容器外部的左侧和右侧背景
不幸的是，响应式的行为不正确，有人知道如何优雅且响应式地做到这一点吗？
最佳答案
您可以使用伪元素添加该除数。将左侧设置为一种颜色，将右侧设置为另一种颜色。然后，伪元素将包含实际的渐变。
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>关于html - 考虑引导列的左侧背景和其他右侧背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53838741/