多个U形div

Question

我试图获得一些漂亮的U形div。 这是预期的结果（它必须看起来很好并且响应迅速）：

这是我为页脚找到的解决方案（形状不是我想要的那么好）：

footer:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 0px 0px 50% 50%;
  width: 100%;
  height: 140px;
  background-color: white; /* but if I choose a bg image for about us this solution is wrong */
  left: 0;
  top: 0px;
}

我将有多个类似于#about-us的部分。你能在这里推荐一个不错的起始解决方案请记住品牌部分背景我有动画，页脚背景图片。这就是为什么我无法在about-us中使用我footer使用的解决方案的原因。让我们用椭圆形切割这个div，让这个部分变得透明。

更新： 我当前的标题/关于我们恼人的合并。添加灰色形状（内部标题或在我们的顶部）不是解决方案。

Answer 1

.u-shape {
  height: 120px;
  right: -100px;
  left: -100px;
  z-index: 1000;
  position: absolute;
  margin: 0 auto;
}

.u-shape.top {
  top: -120px;
  background: radial-gradient(ellipse at 50% 0, transparent 69%, white 70%);
}

.u-shape.bottom {
  top: 0;
  background: radial-gradient(ellipse at 50% 0, white 69%, transparent 70%);
}

用法：

<header>...</header>
<div class="u-shape top"></div>
<div id="about-us"></div>
<div class="u-shape bottom"></div>
<footer>...</footer>

有用的： https://codepen.io/thebabydino/pen/wFvmA