Wie erstellt man das folgende Bild als Header-Hintergrund in HTML5 und CSS3?

Question

Ich arbeite an einer Site.Ist es möglich, ein div mit einem gekrümmten Boden mit HTML5 CSS3 und Javascript zu machen. Es wird aussehen wie

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>