Curved sides in CSS3

Question

I am working on a website with a completely unique slide show ...

As you can see, the top of the image should be curved in a weird way, and then blend in with the background. Currently, it is simply configured as an overlay <div>that lines up with the main background image, but as the site responds, everything becomes funky at certain resolutions.

Can CSS be used to accomplish the same effect? I experimented with the radius of the border, but I'm not sure if this is possible. I would even be happy if it were not 100% cross-browser, as it could degrade to a simple edge.

Thanks.

Answer 1

SVG .

, SVG , "" ( top), . bg- .

100%: http://jsfiddle.net/fmpeyton/NuneR/

: 100% , , "" . FF, JSfiddle. - /.

, .

Edit:

, / . , :

• http://www.hongkiat.com/blog/css-masking/
• http://www.html5rocks.com/en/tutorials/masking/adobe/

/ , , , .

Answer 2

css 3:

transform:rotate(10deg);
border-radius:7px;
box-shadow:4px 5px 6px #DDD;

. .