微信小程序 css实现组件底部大圆弧效果

1.wxml

<view>
  <view class="area">
    
  </view>
</view>

2.wxss

.area {
  display: relative;
  flex-direction: column;
  align-items: center;
  height: 300rpx;
}
.area::after{
  content: '';
  width: 120%;
  height: 300rpx;
  position: absolute;
  z-index: -1;
  left: -10%;
  top: 0;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(160deg,#84c4ef, #84c4ef);
}

实现效果