用伪元素制作半圆背景图

首先先来看一下效果图

半圆.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;
      }