Divide two divs into another curved / arched div

Question

I want to create a site layout containing several full-width images that are vertically aligned. Images should be separated by a curved element, which is ideally created using HTML / CSS, since the width can change, and the curve should always fill 100% of the width.

I uploaded a visualization of my problem here:

I tried some things with border-radius , for example: http://jsfiddle.net/37u4c/34/ , but the results are not quite what I want. The height of the element should always remain 20 px, but with a round border it becomes smaller at the edges .... Any tips or ideas are welcome!

Answer 1

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

Demo

Exit:

HTML:

 <div> <img src="http://lorempixel.com/output/people-qc-640-480-9.jpg" alt="" /> <div class="round"> <img src="http://lorempixel.com/output/people-qc-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 cannot get custom forms.

A little search robot made me this pen .

I think you could get what you want by creating the svg path element and using it as a separator (lines 36-44 html).

LIST OF WAYS

Answer 3

You can achieve this with a border radius, I gave an example of this for you right here: http://jsfiddle.net/zvP7s/2/

CSS is as follows:

 .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, this does not look the way you want, and this is because I think you should not do this with the radius of the border. You can create an image of the desired arc and place it between the images.

EDIT

I will post another example of the border radius, as there may be another way to do this.

EDIT 2

Nevermind, he looks even worse.