Curved Sides in CSS3

Question

I'm working on a website that has quite a unique slideshow...

As you can see, the top of the image needs to curve in a weird way, and then blend in to the background. Currently, this is just set up as an overlayed <div> that lines up with the main background image, but because the site is responsive, things get funky at certain resolutions.

Is there any way to use CSS to accomplish this same effect? I've been experimenting with border-radius, but I'm not sure it's possible. I'd even be happy if it wasn't 100% cross browser, as it can degrade to just a straight edge.

Thanks.

Answer 1

I've done some work with SVGs as section separators.

The idea was to place a SVG above the section that it should "clip" and use negative margins (or the top property) to lower the separator onto the section. The section can have a bg image to achieve this effect.

In this demo, I was using 100% width separators: http://jsfiddle.net/fmpeyton/NuneR/

A word of caution: With 100% separators like in this demo, you might get some 'bleed' from the image underneath. It happened in FF when I was prototyping that JSfiddle. I wasn't really able to alleviate this without some hacky widths/margins.

Hope it points you in the right direction.

Edit:

To expand upon my answer, there are some other ways to clip/mask an element. Here are some resources I've been looking over when looking for a solution:

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

Most of the clipping/masking properties are not cross browser compatible, so use only in a case where you can fall back to a full, unmasked image.