Divide two divs by another curved/arched div - html

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%;
}

Answer 2

The problem with border-radius is that (imho) you can't get custom enough shapes.
A bit of googling got me to this pen.
I guess you could get what you want by creating an svg path element and using it as a separator (lines 36-44 of the html).
PATH REFERENCE

Answer 3

You could achieve this with a border-radius, I've made an example of it for you right here:
http://jsfiddle.net/zvP7s/2/
The CSS looks as following:
.full-width img {
width: 100%;
height: auto;
}
.top-picture {
height: 350px;
overflow: hidden;
}
.bottom-picture {
position: relative;
top: -200px;
overflow: hidden;
border-top: 2px solid white;
-webkit-border-top-left-radius: 50%;
-webkit-border-top-right-radius: 50%;
-moz-border-radius-topleft: 50%;
-moz-border-radius-topright: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
However, it does not look quite as what you want, and that is because I think you should not do this with a border radius. You could create an image of the arc you want and position it between your images.
EDIT
I will post another example of border-radius as there might be another way to do this.
EDIT 2
Nevermind, it looks even worse.