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{ 
 
\t width: 400px; 
 
\t height: 200px; 
 
\t background: #F98821; 
 
\t -moz-border-radius: 200px/91px; 
 
\t -webkit-border-radius: 200px/91px; 
 
\t border-radius: 200px/91px; \t 
 
} 
 

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

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

Answer 2

Reference

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

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

 
\t top:13px; 
 
\t position: absolute; 
 
}

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

Answer 3

使用視窗單位是最好的響應

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

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