如何在引导程序中制作两列具有不同背景和左右间距的列

Question

我想使网站顶部栏像这张图：

第一列的颜色应为1。 第二列应具有颜色2 这些列之间应该有角度。

所以我这样尝试：

以下是HTML代码：

<section class="topbar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-md-6 left">
        <p>Welcome to Remote Auto Diagnostics</p>
      </div>
      <div class="col-12 col-md-6 right">
      </div>
    </div>
  </div>
</section>

以下是CSS：

.topbar {
    background: #f41004;
    padding: 5px;
    color: #fff;
    line-height: 30px;
}

.topbar .left {
    background: #00f;
}

.topbar .left:after {
    content: "";
    display: block;
    width: 100px;
    height: 200%;
    background: blue;
    position: absolute;
    right: -20px;
    top: -10px;
    transform: skew(-45deg);
}

它给出如下结果：

如您所见，由于容器和显示.topbar背景，因此存在左右填充。如何使.left背景色从左开始。

当我使用容器流体时，容器左右填充物会被移除，如下所示：

Answer 1

我使用了不同的方法：我不使用:after来倾斜内容，而是直接倾斜具有蓝色背景的“左”内容，并倾斜“左”内容。

演示：http://jsfiddle.net/aq9Laaew/81233/

HTML

<section class="topbar">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="skewed">
                    <div class="content">
                        Welcome to Remote Auto Diagnostics
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                Menu
            </div>
        </div>
    </div>
</section>

CSS

.topbar {
    background: #f41004;
    color: #fff;
    line-height: 2rem;
}

.topbar .skewed {
    background-color: #00f;
    transform: skew(-45deg);
    margin-left: -2rem;  /* this offset margin-left = padding-left */
}

.topbar .skewed .content {
    padding-left: 2rem;  /* this padding-left = offset margin-left */
    transform: skew(45deg);
}

结果

注意：我假设您不希望在小屏幕上出现偏斜效果。因此，我建议不要使用内置的容器，行和列，而可以直接使用flex-box直接设置顶部栏的样式，以便您拥有更多控件。

Answer 2

您可以使用CSS渐变：https://css-tricks.com/css3-gradients/

background: linear-gradient(135deg, blue 50%, red 50%);

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.topbar {
    /*background: #f41004;*/
    background: linear-gradient(135deg, blue 50%, red 50%);
    color: #fff;
    padding: 5px;
    line-height: 30px;
}

.topbar .left {
  position: relative;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="topbar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-xs-6 left">
        <p>Welcome to Remote Auto Diagnostics</p>
      </div>
      <div class="col-12 col-xs-6 right">
      </div>
    </div>
  </div>
</section>