将两个div除以另一个弧形/拱形div

Question

我想创建一个包含几个全宽图片的网站布局，这些图片是垂直对齐的。图片应由弯曲元素分隔，理想情况下，该元素由HTML / CSS创建，因为宽度可能会改变，曲线应始终填充100％宽度。

我已在此处上传了我的问题的可视化：

我已尝试使用border-radius的一些内容，如下所示：http://jsfiddle.net/37u4c/34/但结果并不是我想要的结果。元素的高度应始终保持20 px，但圆形边缘在边缘处变小.... 任何提示或想法都非常感谢！

Answer 1

border-radius的问题在于（imho）你无法获得足够的自定义形状。

一些谷歌搜索让我到this pen。

我猜您可以通过创建svg path元素并将其用作分隔符（html的行36-44）来获得所需内容。

PATH REFERENCE

Answer 2

您可以使用边框半径实现此布局，关键是使边框半径宽于视口的元素：

<强> DEMO

输出：

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 3

你可以通过边界半径实现这一点，我已经为你做了一个例子： http://jsfiddle.net/zvP7s/2/

CSS看起来如下：

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

然而，它看起来并不像你想要的那样，这是因为我认为你不应该用边界半径来做这件事。您可以创建所需弧的图像并将其放置在图像之间。

修改

我将发布另一个border-radius示例，因为可能有另一种方法可以做到这一点。

编辑2

没关系，看起来更糟。