html - 将两个 div 除以另一个 flex/拱形的 div

Question

我想创建一个包含多张垂直对齐的全宽图片的网站布局。图片应由曲线元素分隔，最好使用 HTML/CSS 创建，因为宽度可以改变，曲线应始终填充 100% 宽度。

我在这里上传了我的问题的可视化:

我已经用border-radius 尝试了一些东西，像这样:http://jsfiddle.net/37u4c/34/但结果并不完全是我想要的。元素的高度应始终保持 20 像素，但使用圆形边框时，它的边缘会变小....非常感谢任何提示或想法!

Answer 1

您可以使用 border radius 实现此布局，重点是使 border-radius 的元素比视口(viewport)宽:

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