1.实现效果
image.png
2.实现原理
方法一：设置伪元素after，根据需要的弧度，设置圆的宽度。圆的高度越高，幅度越大。
方法二：利用margin-left和margin-top将一个完整的圆移出去相应的位置。
本文采用的是方法一！
3.完整代码（更多小程序代码请移步码云）
https://gitee.com/susuhhhhhh/wxmini_demo
4.部分代码
.head_top{
width: 100%;
height: 100rpx;
position: relative;
z-index: -1;
overflow: hidden;
}
.head_top::after{
content: '';
width: 140%;
height: 100rpx;
position: absolute;
z-index: -1;
left: -20%;
top: 0;
border-radius: 0 0 50% 50%;
background: #a4d1eb;
}
.head_top{
width: 100%;
height: 300rpx;
position: relative;
z-index: -1;
overflow: hidden;
}
.head_top::after{
content: '';
width: 140%;
height: 300rpx;
position: absolute;
z-index: -1;
left: -20%;
top: 0;
border-radius: 0 0 50% 50%;
background: #e0bbc3;
}
