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

Question

理想情况下，我想使用CSS3来做这件事，但是会选择SVG。我可以在CSS JSFiddle中做出类似这样的事情......但是边框半径似乎没有像图像所示那样突出曲线。

基本上我有一个标题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。它不像你上面的图片那么清晰，但非常接近。 more info