设置两个div之间的倾斜分隔

Question

我正在尝试为移动网站创建一个目标网页，我想要两个带有图像的主要div。 （在我的例子中有颜色）。这是我的HTML：

<ion-content>

  <div class="upperblock"></div>
  <div class="downblock"></div>

</ion-content>

我的CSS：

  .upperblock{
    width: 100%;
    height: 50%;
    background-color: #2ec95c;


  }

  .downblock{
    width: 100%;
    height: 50%;
    background: #000;

  }

我希望有一个“倾斜”的分离，就像那样（我的结果的屏幕截图，红线是我想要分离的地方）：

提前感谢您的帮助，找不到任何相关内容！

Answer 1

.container {
  position: relative;
  overflow: hidden;
  background-color: #2ec95c;
}
.upperblock {
  width: 100%;
  height: 200px;
  background-color: #2ec95c;
  color: #000;
}

.downblock {
  width: 100%;
  height: 200px;
  background-color: #000;
  color: #FFF;
}

.block {
  transform: skewY(-6deg);
  padding: 50px;
  margin: -5% 0;
}
.block * {
  transform: skewY(6deg);
}

<div class="container">
  <div class="block upperblock">
    <h2>content</h2>
  </div>
  <div class="block downblock">
    <h2>content</h2>
  </div>
</div>

Answer 2

你可能想在每个div下面添加另一个div（我认为:after应该在这里做诀窍），然后用transform: rotate(15deg)转换它。这将改变div。

重要提示：已翻开框中的内容也将被启用。所以你可能想要分离内容和背景div。

其他方式是创建一个svg图像。 SVG将完美扩展，代码看起来更干净;）

Answer 3

您也可以使用伪元素来实现

＆＃13;

＆＃13;

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}

.upperblock {
  width: 100%;
  height: 50%;
  background-color: #2ec95c;
  position: relative;
}

.downblock {
  width: 100%;
  height: 50%;
  background: #000;
  position: relative;
}

.downblock::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: inherit;
  position: absolute;
  top: 0;
  transform: skewY(-10deg) translateY(-50%);
}

＆＃13;

<div class="upperblock"></div>
<div class="downblock"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用CSS将块附加到upperblock div，然后使用transform将其旋转。你需要根据你的内容玩高峰，但这会扩大并有所回应。

.outer {
  overflow: hidden;
}
.upperblock{
  width: 100%;
  min-height: 40vh;
  background-color: #2ec95c;
  position: relative;
}
.upperblock::after {
  content: "";
  display: block;
  height: 120px;
  background: #2ec95c;
  width: calc(100% + 50px);
  position: absolute;
  bottom: -60px;
  transform: rotate(7deg);
}

.downblock{
  width: 100%;
  min-height: 60vh;
  background: #000;
}

<div class="outer">
  <div class="upperblock"></div>
  <div class="downblock"></div>
</div>