完全に丸みを帯びた境界

Question

新しいWordpressテンプレートでは、イメージの下に重なっているラウンドアイヘッダを（Photoshopで）設計しました。

デザイン：

私の試み：

コード：

今は、境界線の半径を使用しています。画像を切り抜くのではなく、CSSで処理したいからです（応答性の理由もあります）。

border-radius: 100%/100%; 

どのように値を変更しても、境界線はきれいに丸くなりません。

ウェブサイトこれまで：http://voorbeeld.website/19/

は、たぶん私はPhotoshopで少しも創造的だったが、何も不可能ではありません！右？

Answer 1

.wrapperの要素はまた、位置を持っているrelativeまたはabsolute、またはあなたが:before

.wrapper { 
 
    position: relative; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 
.wrapper:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -200px; 
 
    left: -10%; 
 
    width: 120%; 
 
    height: 400px; 
 
    background: lightgray; 
 
    border-radius: 50%; 
 
} 
 
.content { 
 
    position: relative; 
 
    padding: 20px; 
 
    text-align: center; 
 
}

<div class="wrapper"> 
 

 
    <div class="content"> 
 
    Put your content here 
 
    
 
    </div> 
 
    
 
</div>

に z-index: -1を設定する必要があることを確認し、この場合、私は :before

を使用し、擬似要素を使って