Divide two divs by another curved/arched div

Question

I want to create a website layout containing several full width pictures, which are aligned vertically. The pictures shall be seperated by a curved element, which ideally is created with HTML/CSS, as the width could change and the curve shall always fill the 100% width.

I have uploaded a visualization of my problem here:

I have tried some stuff with the border-radius, like this: http://jsfiddle.net/37u4c/34/ but the results are not quite what I want. The height of the element shall remain always 20 px, but with the round border it gets smaller at the edges.... Any tips or ideas are greatly appreciated!

Answer 1

You can achieve this layout using border radius, the point is to make the element with border-radius wider than the viewport :

DEMO

Output :

HTML :

<div>
    <img src="http://lorempixel.com/output/people-q-c-640-480-9.jpg" alt="" />
    <div class="round">
        <img src="http://lorempixel.com/output/people-q-c-640-480-7.jpg" alt="" />
    </div>
</div>

CSS :

div{
    position:relative;
    overflow:hidden;
}
img {
    width:100%;
    display:block;
    margin:0 auto;
}
.round {
    position:absolute;
    width:200%;
    left:-50%; top:50%;
    border-top-left-radius:100%;
    border-top-right-radius:100%;
    border-top:20px solid #fff;
    border-right:20px solid #fff;
    border-left:20px solid #fff;
}
.round img {
    width:60%;
}