需要使用css制作曲线

Question

我正在尝试使用css创建这样的曲线线：

这使它弯曲，但不能弯曲。或者是否可以使一条边界实线使其弯曲？在此先感谢..任何人都可以帮助我

我的代码：http : //codepen.io/elad2412/pen/PwWjLL

.box{
  width:500px; height:100px;  
  border:solid 5px #000;
  border-color:#000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
}

Answer 1

尝试这个：

.wave {
  width: 800px;
  height: 200px;
  position: relative;
}

.wave:after {
    content: '';
    width: 50%;
    position: absolute;
    height: 200px;
    display: block;
    border-bottom: 19px solid black;
    border-radius: 50%;
    left: 50%;
}

.wave:before {
    content: '';
    width: 50%;
    position: absolute;
    height: 200px;
    display: block;
    border-top: 19px solid black;
    border-radius: 50%;
}

<div class="wave">
  
</div>

https://codepen.io/anon/pen/EWpjpx