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

html 代码：

<div class="circle"></div>

css 代码：

.circle {
  width: 140%; // 宽度大点，用来隐藏左右比较不平滑的弧度
  height: 200px; // 通过改变高度，可以调整弧度大小
  background: #ef504c;
  border-radius: 0 0 50% 50%; // 左下、右下圆角处理
  margin-left: -20%; // 隐藏左右比较不平滑的弧度，使整体平滑过渡
}

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

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

.circle {
  width: 140%;
  height: 200px;
  background: #ef504c;
  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;
}`

最终效果如下：

该方法同样适用在 uni-app 相关页面中，如有用到的同学可以自行改造。

思考

是否可以通过 CSS 伪元素 实现类似的效果？大家不妨自己动动手实现下。