如何使用CSS创建此形状？

Question

我需要创建这个形状：

使用border-radius（据我所知），无法实现这一目标。

Obs：这不是椭圆形，如本SO问题所述：How to give a div oval shape?

Answer 1

简单的答案是 - “你不能。但是，有办法做到这一点。”

您可以尝试使用像Mozilla Borders生成器这样的工具，它将输出所有主流浏览器都支持的高级版本的border radius语法。 ：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator

OR

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

如果它不够漂亮，您可能希望将Clip-Path与背景颜色结合使用。有关它的更多信息可以找到here但我想提醒您，遗憾的是并非所有浏览器都支持它。使用剪辑路径，您甚至可以绘制SVG并将其用作蒙版。

我发现也可以使用面具，所以你可以查看this

第三种选择是使用背景图像......