确保两个倾斜的 div 始终垂直连接且没有间距

Question

我有以下布局 - 我试图确保无论屏幕大小如何，两个 div 总是一个在另一个下面对齐，并且它们之间没有空白 space。当我在大显示器上 div2 上设置 margin-top: 15% 时，这工作正常，但是当我缩小屏幕尺寸时，我需要一个更接近 20% 的值。如何确保这两个 div 始终对齐？

#div1 {
  background-image: linear-gradient(45deg, #6303B1, #ff0099);
  clip-path: polygon(0px 10%, 100% 0px, 100% 90%, 0px 100%);
  padding-top: 10%;
  padding-bottom: 10%;
}

#div2 {
  background-image: linear-gradient(45deg, #6303B1, #ff0099);
  clip-path: polygon(0px 10%, 100% 0px, 100% 90%, 0px 100%);
  padding-top: 10%;
  padding-bottom: 10%;
}

<section>
  <div id="div1">
    <p>hi</p>
  </div>
</section>
<section>
  <div id="div2">
    <p>hi</p>

  </div>
</section>

Answer 1

考虑在剪辑路径和边距中使用 vw 单元。我考虑过 5vw 但你可以随意调整它：

#div2 {
  margin-top:-5vw;
}

[id] {
  background-image: linear-gradient(45deg, #6303B1, #ff0099);
  clip-path: polygon(0px 5vw, 100% 0px, 100% calc(100% - 5vw), 0px 100%);
  padding-top: 10%;
  padding-bottom: 10%;
}

<section>
  <div id="div1">
    <p>hi</p>
  </div>
</section>
<section>
  <div id="div2">
    <p>hi</p>

  </div>
</section>

一个像素值也可以完成这项工作：

#div2 {
  margin-top:-40px;
}

[id] {
  background-image: linear-gradient(45deg, #6303B1, #ff0099);
  clip-path: polygon(0px 40px, 100% 0px, 100% calc(100% - 40px), 0px 100%);
  padding-top: 10%;
  padding-bottom: 10%;
}

<section>
  <div id="div1">
    <p>hi</p>
  </div>
</section>
<section>
  <div id="div2">
    <p>hi</p>

  </div>
</section>

确保两个倾斜的 div 始终垂直连接且没有间距

Ensuring two slanted divs are always connected vertically with no spacing

html

css

clip-path