实施不规则形状的div / folds的最佳响应方法是什么？

问题描述

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

我当前的解决方法： 我实现这些设计的典型方式是结合使用剪切路径，肿的垂直填充来处理剪切路径剪切内容，然后在下一个折页上使用负边距顶部来覆盖由剪切路径创建的空白区域。剪切路径。我用视口宽度（例如-10vw）声明了负的top-top值，因此折痕会根据浏览器的宽度进行调整。

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

下面是一张图像，进一步描述了我用不规则形状的div / folds表示的意思： https://imgur.com/a/jCbJZS4

任何帮助将不胜感激。这些设计似乎正在流行，因此您的帮助也将为我和其他人在将来的项目中服务。谢谢！

解决方法

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,tation maluisset voluptatibus sea ex.</p>
  </div>
</section>