HTML/CSS3 - 曲线线条

Question

我需要帮助在css3/html5中创建一条弧线，并使边缘渐变，就像这张图片。我已经查看了这个示例来自codepen，但是边缘没有渐变。

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

您能否完成这个任务？

- stig

Answer 1

只需将此内容复制粘贴到您的 HTML 中即可。

.box{
 width: 400px;
 height: 200px;
 background: #F98821;
 -moz-border-radius: 200px / 91px;
 -webkit-border-radius: 200px / 91px;
 border-radius: 200px / 91px; 
}

.box:before {
 content: '';
 width: 400px;
 height: 200px;
 background: #fff;
 -moz-border-radius: 193px / 70px;
 -webkit-border-radius: 193px / 70px;
 border-radius: 193px / 70px;
 top:13px;
 position: absolute;
}

<div class="box"></div>

- Jishnu V S

Answer 2

使用视窗单位可以获得最佳的响应性。

.holi {
  border-top: orange solid 5px;
  width: 50vw;
  margin: 0 auto;
  height: 14vh;
  border-radius: 25vw / 7vh;
}

<div class="holi">
</div>

- Redu

Answer 3

参考资料

.box{
 width: 400px;
 height: 200px;
 background: orange;
 -moz-border-radius: 200px / 100px;
 -webkit-border-radius: 200px / 100px;
 border-radius: 200px / 100px; 
}

.box:after {
 content: '';
 width: 400px;
 height: 200px;
 background: #fff;
 -moz-border-radius: 200px / 100px;
 -webkit-border-radius: 200px / 100px;
 border-radius: 200px / 100px;

 top:13px;
 position: absolute;
}

<div class="box"></div>

- smalinux