将两个 div 除以另一个弯曲/拱形 div答案

【问题标题】：Divide two divs by another curved/arched div将两个 div 除以另一个弯曲/拱形 div
【发布时间】：2023-03-31 12:20:01
【问题描述】：

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

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

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

【问题讨论】：

“我已经尝试了一些带有边界半径的东西” - 发布你的代码

标签： html css css-shapes

【解决方案1】：

你可以使用边框半径来实现这种布局，关键是让边框半径的元素比视口宽：

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

【讨论】：

看起来很像预期的，除了弯曲很大。我怎样才能让拱门更平一点？进一步扩大圆形元素的宽度？
@Maurice 是的，例如：jsfiddle.net/webtiki/Jjmd2/1（我还更改了图像居中的方式）
好的，我知道了，现在我只需要平滑拱形，看起来有点阶梯状
@Maurice 抗锯齿与浏览器相关，您将无法完全删除它。如果这对您来说是个问题，最好的办法是使用具有透明度的.png 图像。你也可以看看这篇文章sitepoint.com/how-to-get-smoother-rounded-corners

【解决方案2】：

border-radius 的问题是（恕我直言）您无法获得足够的自定义形状。

我在谷歌上搜索了一下this pen。

我想你可以通过创建一个svgpath 元素并将其用作分隔符（html 的36-44 行）来获得你想要的。

PATH REFERENCE

【讨论】：

【解决方案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%;
}

但是，它看起来并不像您想要的那样，那是因为我认为您不应该使用边界半径来执行此操作。您可以创建所需的弧线图像并将其放置在图像之间。

编辑

我将发布另一个边框半径示例，因为可能有另一种方法可以做到这一点。

编辑 2

没关系，看起来更糟。

【讨论】：

是的，我遇到了同样的问题，它的外边缘看起来不太好，但感谢您的尝试。摄氏爵士想出了一个有前途的解决方案
他确实做到了，看起来值得一试。