css - 带有 CSS 的略微弧形页脚

Question

我在 Photoshop 中制作了一个页脚，如下所示:

如您所见，此处的页脚一直略微呈弧形。我试过用 border-radius 做一些事情，但这几乎只针对边缘，这使得边缘的弧度更加 flex ，甚至没有收到图像中看到的微妙弧形页脚的效果。

是否有一种简单的 CSS 方法可以做到这一点，或者我是否需要一些 JavaScript 或其他东西来实现这一点？

Answer 1

使用页脚的伪元素和 border-radius 制作拱门。

我在这里为它们设置了不同的颜色，这样您就可以看出哪个元素是哪个。

body {
 margin: 0;
 max-height: 100vh;
 overflow: hidden;
}
footer {
  bottom: 0; left: 0; right: 0;
  position: absolute;
  background: brown;
  height: 10vh;
}
footer::before {
  content: '';
  background: red;
  width: 200%;
  position: absolute;
  left: 50%; 
  top: -100%;
  transform: translateX(-50%);
  height: 1000%;
  border-radius: 50%;
  z-index: -1;
}

<footer></footer>