如何使div容器这样倾斜？

Question

如何使左侧容器（awd-left）与本设计中的外观相同？

我的代码：

<section>
  <div class="container awd-container">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 awd-left">
      <!-- SOME CODE HERE -->
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 awd-right">
      <!-- SOME CODE HERE -->
    </div>
  </div>
</section>

Answer 1

实际上是一个简单的渐变技巧。

.awd-container {
  height: 200px;
  width: 100%;
  border: 1px solid red;
  background-image: linear-gradient(to bottom right, white 0%, white 50%, black 50%, black 100%);
}

<div class="awd-container">
  This works!
</div>

试用这些值并查看适合您的情况的

Answer 2

Danyal发表的linear-gradient背景方法可以使用，但是该解决方案的问题在于，在调整屏幕大小时，对角线的角度会发生变化。为了在缩小屏幕时保持一致的角度，您需要一个更加复杂的解决方案。

这里的基本方法是将每一侧倾斜到所需的角度，然后将另一侧的子代向另一个方向倾斜，这样所有内容看起来都不像是一个角度。

如果这样做，最终将导致背景色无法覆盖容器的整个宽度，但是-左上角和右下角会留有空白-因此，您还需要加大每个背景的尺寸填充该空间。

您可以通过使用calc来做到这一点，该宽度要使容器具有一定百分比的宽度，再加上等于该空白宽度的一些额外量。可能有一些数学方法可以根据您的容器宽度和倾斜角度确定空白区域的宽度，但是我只是使用开发工具进行实验并弄清楚。在下面的示例中，它恰好是115px。

弄清楚那个魔术数字后，您将执行以下操作：

• 左侧calc([some-percentage] + 115px)
• 右侧calc([some-percentage] + 115px)
• 左侧margin-left: -115px
• 右侧margin-right: -115px
• 左侧padding-left: 115px
• 右侧padding-right: 115px

负边距将使屏幕的每一侧移开，以便您的背景覆盖整个空间。然后，填充将该侧中的内容移回该侧的可见中心。

确保在父项上包含overflow: hidden。

这是一个例子：

.container {
  width: 100%;
  height: 250px;
  display: flex;
  overflow: hidden;
}
.left-skew,
.right-skew {
  width: calc(50% + 115px);
  height: 100%;
  transform: skewX(-30deg);
  display: flex; /* just for this example */
  justify-content: center; /* just for this example */
  align-items: center; /* just for this example */
}
.left-unskew,
.right-unskew {
  transform: skewX(30deg);
}
.left-skew {
  margin-left: -115px;
  padding-left: 115px;
  background-color: lightgray;
}
.right-skew {
  margin-right: -115px;
  padding-right: 115px;
  background-color: black;
  color: white;
}
body {
  margin: 0;
}

<div class="container">
  <div class="left-skew">
    <div class="left-unskew">lorem ipsum dolor sit amet</div>
  </div>
  <div class="right-skew">
    <div class="right-unskew">lorem ipsum dolor sit amet</div>
  </div>
</div>