css实现弧形UI

先是一写元素，再给这个元素设置样式和伪类样式
<view class="pure_top"></view>

比如说这个pure_top元素(因为这里是小程序所以用的是view，h5也是一样实现的啦)，我设置的样式如下:
.pure_top {  
      width: 100%;  
      height: 100px;  
      position: relative;  
      z-index: -1;  
      overflow: hidden;
}
.pure_top::after {  
     content: '';  
     width: 140%;  
     height: 100px;  
     position: absolute;  
     left: -20%;  
     top: 0;  
     z-index: -1;  
     border-radius: 0 0 50% 50%;  
     background: #1496f1;
}
如何在元素后追加一个after，当然是元素自身定位为relative，伪类设置content:‘’，并相对定位为absolute，再设置下left ,top 值，使伪类元素的位置摆放的合理就行了。
这里需要注意的是我把z-index值设为-1，因为弧形一般是作为背景图的，所有层级自然要放低些。

上面的伪类.pure_top::after { content: '';width: 140%;}宽度为140%，难怪弧度那么大呢？半径越大，弧度就越大，那我们可以减小半径来达到变小弧度的需求