前端需求经常千变万化,有时需要用到如下图的圆弧背景,我们马上想到可以直接使用背景图,其实直接用 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;
}

最终效果如下:

css圆弧示例.png

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

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

如果觉得我的文章对你有用,请随意赞赏