CSSを使用してこのシェイプを作成する方法は？

Question

私はこのような形状を作成する必要があります。

これは（私の知る限り知っている）border-radiusを使用して達成することはできません。

OBS：これは楕円形ではない、このSO質問で述べたように：How to give a div oval shape?

Answer 1

簡単な答えは - 「あなたはカントしかし、それを行うための方法があります。」

Mozilla Bordersジェネレータのようなツールを使用すると、すべての主要ブラウザでサポートされているボーダ半径構文の高度なバージョンが出力されます。 ：それはかなり十分でない場合https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator

OR

http://www.css3generator.in/border-radius.html

することは、あなたは、背景色との接続詞にクリップパスを使用する場合があります。その詳細については、hereを参照してください。残念ながら、すべてのブラウザでサポートされているわけではありません。クリップパスを使用すると、SVGを描画してマスクとして使用することもできます。

私はマスクを使用することもできることが判明しているので、あなたがチェックアウトすることができthis

第三の選択肢