我需要帮助在 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>
有可能吗?
最佳答案
只需将其复制粘贴到您的 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>
关于javascript - html/css3 - 曲线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39673836/