如何在HTML5和CSS3中創建以下圖片作爲標題背景？

Question

我正在一個網站上工作。它可以通過使用html5 css3和javascript來製作一個具有彎曲底部的div。它看起來像

Curved header bottom

Answer 1

.container { 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: lightgray; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.inner { 
 
    position: absolute; 
 
    background-color: black; 
 
    top: -200px; 
 
    left: -50%; 
 
    height: 400px; 
 
    width: 200%; 
 
    border-radius: 50%; 
 
}

<div class='container'> 
 
    <div class='inner'> 
 
    </div> 
 
</div>