如何使 div 容器像这样倾斜？ [复制]答案

【问题标题】：How to make div container skew like this? [duplicate]如何使 div 容器像这样倾斜？ [复制]
【发布时间】：2019-01-29 00:45:46
【问题描述】：

如何使左侧容器 (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>

【问题讨论】：

标签： html css

【解决方案1】：

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>

【讨论】：

【解决方案2】：

它实际上是一个简单的渐变黑客。

.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>

玩转这些价值观，看看适合你的情况。

【讨论】：