html / css3 - 曲线

Question

我需要帮助在css3 / html5中创建一条边缘渐弱的曲线，如图像

我一直在看这个例子from 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>

有可能吗？

Answer 1

只需将其粘贴到HTML

即可

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用视口单元最适合响应

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

  

Reference

.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>