css实现底部圆弧

页面布局如下：

<view class="box">
  我是页面内容
</view>
//圆弧部分的高度是由box的高度决定的

css部分代码如下所示：

.box {
  position: relative;
}

.box::after {
  content: '';
  width: 140%;
  height: 100%;
  position: absolute;
  left: -20%;
  top: 0;
  z-index: -1;
  border-radius: 0 0 50% 50%;
  background: #2ea7e0;
}

最终效果如图：