实现不规则形状的 div/折叠的最佳（响应式）方法是什么？

Question

我一直在设计具有非常不规则形状的 div，例如菱形、梯形等。我想知道处理这些类型的设计最灵敏的方法是什么。

我目前的解决方法： 我实现这些设计的典型方法是结合使用剪辑路径、膨胀的垂直填充来处理剪辑路径剪辑内容，然后在下一个折叠处使用负边距顶部来覆盖由剪辑路径。我用视口宽度（例如 -10vw）声明负边距顶部值，因此折叠会根据浏览器的宽度进行调整。

当前解决方法的问题： 负边距通常会导致折叠相互重叠，覆盖其他折叠的内容。需要多个 @media 查询才能使其看起来可以接受，但我仍然遇到折叠相互重叠的某些尺寸。

这里有一张图片来进一步描述我所说的不规则形状的 div/折叠的含义： https://imgur.com/a/jCbJZS4

任何帮助将不胜感激。这类设计似乎很流行，所以您的帮助也将为我和其他人的未来项目服务。谢谢！

Answer 1

SVG 是根据您的图像创建部分分隔线的好方法，（以及其他复杂的形状！）您可以使用 css 定位 svg 中的各种形状（更改填充颜色、动画等），它们受到广泛支持（除了对于旧的 IE 浏览器，自然而然），因为它们只是矢量路径，您可以轻松地拉伸、缩放和扭曲，而且它们的尺寸非常小。

您可以设置一个 svg 分隔符，例如内容部分底部绝对定位的 div 内的波形图案，如下所示。

section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

#sect1 {
  background-color: #2baf70;
}

#sect2 {
  background-color: #f9f9f9;
}

.row {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 45px 45px 115px 45px;
}

.divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmOWY5ZjkiPjxwYXRoIGQ9Ik0xMjgwIDMuNEMxMDUwLjU5IDE4IDEwMTkuNCA4NC44OSA3MzQuNDIgODQuODljLTMyMCAwLTMyMC04NC4zLTY0MC04NC4zQzU5LjQuNTkgMjguMiAxLjYgMCAzLjRWMTQwaDEyODB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYxNDBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCA1MS43NmMtMjAxIDEyLjQ5LTI0Mi40MyA1My40LTUxMy41OCA1My40LTMyMCAwLTMyMC01Ny02NDAtNTctNDguODUuMDEtOTAuMjEgMS4zNS0xMjYuNDIgMy42VjE0MGgxMjgweiIvPjwvZz48L3N2Zz4=);
  /* this is an inlined svg taken from a project I'm working on, as an example. as I can't really import a .svg file here */
  width: 100%;
  background-size: 100% 70px;
  bottom: 0;
  height: 70px;
  z-index: 1;
  display: block;
  background-repeat-y: no-repeat;
  position: absolute;
}

<section id="sect1">
  <div class="row">
    <h2>Mock Content</h2>
    <p>Lorem ipsum dolor sit amet, affert omittam urbanitas est te. Eam ne oportere erroribus, quis veri eam cu, usu ex tota verear iudicabit. Vim modus conclusionemque an, verterem explicari sententiae ei duo. Mel cu docendi fierent, sonet dolorum ocurreret
      at vis. Voluptua fabellas electram ut has, tation maluisset voluptatibus sea ex.</p>
  </div>
  <div class="divider"></div>
</section>
<section id="sect2">
  <div class="row">
    <h2>Mock Content</h2>
    <p>Lorem ipsum dolor sit amet, affert omittam urbanitas est te. Eam ne oportere erroribus, quis veri eam cu, usu ex tota verear iudicabit. Vim modus conclusionemque an, verterem explicari sententiae ei duo. Mel cu docendi fierent, sonet dolorum ocurreret
      at vis. Voluptua fabellas electram ut has, tation maluisset voluptatibus sea ex.</p>
  </div>
</section>