用CSS略微拱起的页脚

Question

我在Photoshop中做了一个页脚看起来像这样:

正如您所看到的,这里的页脚在整个过程中略微弧形.我尝试过使用border-radius,但是它几乎只针对边缘,这使得弧线在边缘更加弯曲,甚至没有像图像中看到的那样接受微妙的弧形页脚的效果.

有没有一种简单的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>