SOURCE

<div class="box">
  <div class="sircle-bar">
  </div>
  
</div>

*{
  padding: 0;
  margin: 0;
  box-sizing:border-box;
}
.box{
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  border-top:1px solid #ccc;
  background: #fff;
}
.sircle-bar{
  /*
    这里宽高控制圆弧的大小
  top控制圆弧y轴的位置 对应下面before的top也要修改
  */
  width: 60px;
  height: 60px;
  overflow:hidden;
  position: absolute;
  top: -15px;
  left: 50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
}
.sircle-bar::after{
  content:"";
  display:block;
  width: 100%;
  height: 100%;
  border:1px solid #ccc;
  border-radius:50%;
  background: #fff;
}
.sircle-bar::before{
  content:"";
  display:block;
  position: absolute;
  width: 200px;
  height: 60px;
  top: 15px;
  left: 0;
   transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  background: #fff;
}