Divide two divs by another curved/arched div

问题

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!

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

回答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

回答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.

来源：https://stackoverflow.com/questions/24991179/divide-two-divs-by-another-curved-arched-div

标签

html

css

css-shapes