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

1.wxml

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

实现效果