如何使用CSS或必要的SVG创建这个喇叭形外观？

Question

理想情况下,我想使用CSS3来做这件事,但是会选择SVG.我可以在CSS JSFiddle中做出类似这样的东西 ......但是border-radius似乎没有像图像所示那样突出曲线.

基本上我有一个标题div,我希望在它的顶部创建这个更暗的弯曲区域.

我非常感谢任何聪明的CSS专家的帮助.谢谢!

Answer 1

我使用您启动的 jsFiddle 并稍微更改了边框半径，效果非常接近。

http://jsfiddle.net/CoryMathews/Q9Mrt/

使用边框半径，您可以为 x 轴和 y 轴定义不同的长度。所以我用了

border-bottom-right-radius:40px 20px;
border-bottom-left-radius:40px 20px;

这使得它在 x 轴上的长度为 40，在 y 轴上的长度为 20。它不像上面的图片那么清晰，但也非常接近。更多信息