纯 CSS 实现圆弧

前端需求经常千变万化，有时需要用到如下图的圆弧背景，我们马上想到可以直接使用背景图，其实直接用 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 伪元素 实现类似的效果？大家不妨自己动动手实现下。

版权属于：瞭月

本文链接：https://www.lervor.com/archives/247/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。