css实现底部圆弧

页面布局如下：

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

css部分代码如下所示：

.box {
    overflow: hidden;
    /* overflow: hidden;不加此属性会导致移动端出现横向滚动条 */
    position: relative;
    height: 160px;
}

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

最终效果如图：