css实现弧形背景

<view class="user">
  <view class="user-bg boxShadow"></view>
  <view class="user-card"></view>
  <view class="user-coluom">
    <view class="user-coluom-top">
      <view class="user-coluom-top-title">我的订单</view>
    </view>
  </view>
</view>

<style>
  .user {
    &-bg {
      background-size: 100% 100%;
      height: 180px;
      min-height: 160px;
      overflow: hidden;
    }
    &::before {
      content: '',
      display: block;
      width: 140%;
      height: 200px;
      background: #2f2f2f;
      border-radius: 0 0 50% 50%;
      margin-left: -20%;
      background-image: initial;
      background-position-x: initial;
      background-position-y: initial;
      background-size: initial;
      background-repeat-x: initial;
      background-repeat-y: initial;
      background-attachment: initial;
      background-origin: initial;
      background-clip: initial;
      background-color: rgb(47, 47, 47);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 50%;
      border-bottom-left-radius: 50%;
    }
    &-card {
      background: #e0b163;
      background-size: 100% 100%;
      position: relative;
      margin: -170px 15px 5px;
      padding: 20px 20px;
      height: 215px;
      border-radius: 10px;
      overflow: hidden;
      box-sizing: border-box;
      animation-timing-function: linear;
    }
    &-column {
      &-top {
        position: relative;
        margin-left: 10px;
        padding: 10px 10px 5px;
        overflow: hidden;
        line-height: 20px;
        &-title {
          float: left;
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
        }
      }
      &::before {
        content: '';
        position: absolute;
        top: 13px;
        left: 0rpx;
        width: 2px !important;
        height: 15px !important;
        background: linear-gradient(#215bab, #a2c1f1);
        background-image: linear-gradient(rgb(33, 91, 171), rgb(162, 193, 241));
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: initial;
      }
    }
  }
  
  .boxShadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }
</style>