从截面背景中剪出一个半圆并显示其背后的背景

问题描述

除了使用透明的 png 之外，我一直在努力寻找最好的方法来做到这一点。

我正在构建的网站的设计师将这些圆圈从网站的每个部分中剪掉，作为整体主题的一部分。我喜欢它的外观，但以一种自动发生的方式实现它并不明显。

我尝试了一些 SVG 遮罩，但它不会显示其背后的背景。理想情况下，图像可以由站点编辑器替换，而不必从每张图像中剪下这一部分。有没有一种 css、javascript 或 canvas 方法可以实现我的想法？

此外，每个部分都有背景图片。不仅仅是纯色和渐变。

Click Here to View Example Image

解决方法

CSS 直接将三个 <div> 定位在包装元素内（在本例中为 <section>

两个外部 <div> 是条形，而内部 div 则营造出半圆的错觉。这只需提供两倍于其宽度的边框半径即可完成。

一旦“圆”居中并设置了 z-index，您就有了解决方案。

我已经把箭头放在圆圈里了。

section {
  z-index: 50;
  position: relative;
  width: 100vw;
  height: 250px;
}

div {
  z-index: 25;
  position: absolute;
  height: 50%;
  width: 100%;
}
div:nth-child(1) {
 background-image: url(https://via.placeholder.com/160?text=TOP);
 }

div:nth-child(2) {
 background-image: url(https://via.placeholder.com/160/0000FF?text=CENTER);
 background-position: center;
  z-index: 999;
  top: 75px;
  left: calc((100vw/2) - 50px);
  width: 100px;
  height: 100px;
  border-radius: 200px;
}

div:nth-child(3) {
 background-image: url(https://via.placeholder.com/160/FF0000/FFFFFF?text=BOTTOM);
  bottom: 0;
  border: 1px solid black;
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>