微信小程序通过css实现底部边大圆弧效果

1.场景

需在个人中心添加下边框为圆弧

2.在wxml中定义一个class节点

<view>
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
</view>

3.在wxss中添加css代码

.userinfo {
  display: relative;
  flex-direction: column;
  align-items: center;
  height: 300rpx;
}
.userinfo::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);
}

4.最终效果