CSSでくし型のような形を作る方法

Question

画像の通り、角ばったくし型？のような形をCSSで作りたいです。

理想

border-radiusで大分近いものにはなったんですがどうしても角が丸くなってしまいます。

現実

border-radius: 170px 170px 0px 0px / 90px 90px 0px 0px;

border-radiusで作るのは不可能でしょうか。
他に作る方法があれば教えていただけないでしょうか。

Answer 1

div::before{
  content:"";
  display:block;
  width:100px;
  height:50px;
  margin-left:-10px;
  background-color:black;
  border-radius: 170px 170px 0px 0px / 90px 90px 0px 0px;
}
div{
  width:80px;
  overflow:hidden;
}

Comments

[ministop]

ありがとうございます！！

Answer 2

border-radiusで作るのは不可能です。

::beforeを使用すれば可能です。
(コードは他の方が記載されたので省略)