在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css的after伪类来实现弧形。
先是一写元素，再给这个元素设置样式和伪类样式
比如说这个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，因为弧形一般是作为背景图的，所有层级自然要放低些。
原作者：grain先森 链接：www.jianshu.com/p/e1ea2ed65… 来源：简书
