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

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