ヘッダーセクションの下部をカーブさせるには？

Question

私はこの質問が尋ねられていることを知っていますが、デザインが実装される方法は、私がそれをどのようにしたいのかではありません。

This is how I want the curved header to look

私が試したの国境半径は左と右が、エッジがあまりにも丸みを帯びています。

これを達成するためのアイデアはありますか？ EDIT：私はボーダー半径が必要であることを知っています、私が言うことをしようとしているのは、半径を本当に丸くしたくないということです。私はそれが私が写真にリンクしたものに正確に欲しい。私はdownvoteの理由を理解していない。

Answer 1

これはCSSで完全に達成できます。ネストされたdivを持つだけで、異なるサイジングと色を適用し、内側のものは外側のものより大きく、外側のオーバービューの視認性は異なります。以下は、曲線の円弧を底部に作成します。あなたはスタイリングで遊んで、望む結果を得ることができます。

border-radius：50％を使用していますが、ボーダー半径が適用されているdivが表示されているよりも大きくなっています - 湾曲したボーダーはより穏やかな円です。

.outer{ 
 
    width:500px; 
 
    height:200px; 
 
    background:white; 
 
    position:relative; 
 
    overflow:hidden 
 
} 
 

 
.inner{ 
 
    width:1000px; 
 
    height:200px; 
 
    background:#29465E; 
 
    border-radius: 50%; 
 
    position:absolute; 
 
    left:-50%; 
 
    top:-25%; 
 
    overflow:visible 
 
}

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

Answer 2

これはCSS設定ではなく、単なる背景画像です。