ヘッダーの丸みを帯びたボトムを作るには？

Question

丸みを帯びたヘッダーを作成するには？

Answer 1

.div { 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding: 50px 0; 
 
} 
 

 
.div-inner { 
 
    position: relative; 
 
    background: black; 
 
    height: 120px; 
 
} 
 

 
.div-inner:before, 
 
.div-inner:after { 
 
    box-shadow: 0 0 0 80px #000; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    height: 150px; /* You can change it */ 
 
    content: ''; 
 
    right: -20%; 
 
    left: -20%; 
 
    top: 100%; 
 
}

<div class="div"> 
 
    <div class="div-inner"></div> 
 
</div>

Answer 2

それを行うには多くの方法がありますが、彼は簡単な方法です。あなたはどんなHTML/CSS経験を持っていますか、これを初めて使っていますか？

body { 
 
    margin: 0; 
 
    background: #8e8e8e; 
 
} 
 
.header { 
 
    height: 50px; 
 
    width: 100%; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 
.content { 
 
    background: #fff; 
 
    height: calc(100vh - 110px); 
 
    border-top-right-radius: 50% 60px; 
 
    border-top-left-radius: 50% 60px; 
 
    padding: 60px 20px 0 20px; 
 
}

<div class="header">Header</div> 
 
<div class="content">Content</div>