CSS 实现圆弧背景

前端需求经常千变万化，有时需要用到如下图的圆弧背景，我们马上想到可以直接使用背景图，其实直接用 css 就可以实现类似效果。

html代码：

<div class="arc"></div>

css代码：

.arc {
  width: 140%; 
  height: 200px; 
  background: pink;
  border-radius: 0 0 50% 50%; 
  margin-left: -20%;
}

一般来说，圆弧都是拿来当背景的，上面都会有其他主体元素，比如下面的完整例子：

<div class="arc"></div>
<div class="box"></div>

.arc {
  width: 140%; 
  height: 200px; 
  background: pink;
  border-radius: 0 0 50% 50%; 
  margin-left: -20%;
}
.box {
  height: 250px;
  margin: -100px 20px 0;
  background: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}

最终效果如下：