html - 如何在 CSS 中制作全宽波浪

Question

我的任务是建立一个网站。在这个网站上，他们的模型中有波浪形的页脚。见下图:

我可能可以在没有中风或黄线的情况下逃脱。主要问题是他们希望这个“页脚波浪”的宽度为 100%。我在想可能有一个 CSS 解决方案吗？可能在 css 中重新创建形状？这可能吗？

Answer 1

你可以使用svg。

body {
  margin: 0;
}
footer {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  overflow: hidden;
}

<footer>
  <svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
    <path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
    <path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
  </svg>
</footer>