微信小程序自定义圆弧背景

1.实现效果

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;
}