css把矩形底部变成弧线

实现的效果如下图所示

css代码：

.personal-head {
    height: 185rpx;
    padding: @spacing 0;
    position: relative;
}

.personal-head:after {
    background-color: @primary-color;
    content: '';
    width: 140%;
    height: 249rpx;
    position: absolute;
    left: -20%;
    top:0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
}

.personal-portrait-box {
    width: 198rpx;
    height: 132rpx;
    margin: 0 auto;
}

.personal-portrait {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin: 2rpx 32rpx 10rpx 35rpx;
    background:@head-text;
    border:4rpx solid @secondary-text;
}

.personal-name {
    height: 36rpx;
    font-size: @main-title;
    font-weight: 500;
    color: @head-text;
    line-height: 36rpx;
    text-align: center;
    margin-top: 10rpx;
}
 

html代码：

<!-- 头像和用户名 -->
<div class="personal-head">
     <div class="personal-portrait-box">
          <div class="personal-portrait"></div>
     </div>
     <div class="personal-name">小宝</div>
</div>