首先先来看一下效果图
半圆.jpg
1.先建一个空div
<div class="pure_top"></div>
2.给这个div设置样式
.pure_top {
width: 100%;
height: 100px;
position: relative;
z-index: -1;
overflow: hidden;
}
3.在元素后追加一个after，当然是元素自身定位为relative，伪类设置content:‘’，并相对定位为absolute，再设置下left ,top 值，使伪类元素的位置摆放的合理就行了。
这里需要注意的是我把z-index值设为-1，因为弧形一般是作为背景图的，所有层级自然要放低些。
.pure_top::after {
content: "";
width: 100%;
height: 100px;
position: absolute;
left: 0;
top: 0;
z-index: -1;
border-radius: 0 0 50% 50%;
background-color: burlywood;
}
