将两个div除以另一个弯曲/拱形div [英] Divide two divs by another curved/arched div

问题描述

我想创建一个网站布局，其中包含几张全角图片，这些图片垂直对齐。图片应由弯曲元素分隔，该元素最好由HTML / CSS创建，因为宽度可能会发生变化，并且曲线应始终填充100％的宽度。

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:

我已经尝试过使用 border-radius ，例如： http://jsfiddle.net/37u4c/34/但是结果不是我想要的。元素的高度应始终保持20 px，但随着圆形边框的出现，边缘的边缘会变小....
任何提示或想法都将不胜感激！

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!

推荐答案

您可以使用边框半径实现此布局，重点是使边框半径大于视口的元素：

You can achieve this layout using border radius, the point is to make the element with border-radius wider than the 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%;
}

这篇关于将两个div除以另一个弯曲/拱形div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！