How can you create this flared look using CSS or if necessary SVG?

Question

Ideally I'd like to do this using CSS3, but would settle for SVG. I can make something quasy like this in CSS JSFiddle ...but border-radius didn't seem up to flaring out the curved lines like the image shows.

Basically I have a header div and am hoping to create this darker curved region at the top of it.

I'd greatly appreciate any help from any clever CSS gurus. Thanks!

Answer 1

I got it pretty close using the jsFiddle you started and changing up the border radius a bit.

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

using border radius you can define different lengths for the x and y axis. So I used

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

That gives it a length of 40 on the x axis and 20 on the y. Its not quite as sharp as your picture above but its pretty close. more info