html - 如何使用 CSS 创建鸥翼形状

Question

我正在尝试创建一个带有背景图像 (background-size:cover) 的 div，该形状在 div 的中心顶部被切掉。

我要从中剪切出此形状的 div 上方的 div 上也有 background-image:cover。我正在尝试使用 CSS 形状来执行此操作，使用负边距顶部向上移动较低的 div，因此上方 div 上的背景图像会通过切出的形状显示。

注意:形状必须与图像看起来相同或几乎相同，因为它是其他人设计的网站的一部分，并且他们的设计非常具体。

有人知道如何创建这个形状吗？

编辑:@SZenC 提供了一个我实现的非常酷的解决方案，除了它给我留下了覆盖在背景图像之上的彩色形状。看图:

我需要浅蓝色图案来显示灰色所在的位置，并需要紫色纹理来显示白色所在的位置。我现在不确定这是否可能，至少对于 CSS。

Answer 1

使用 CSS 的最佳解决方案是使用一些嵌套元素。您可以创建一个 div (.pointy)，其中包含另外两个 div (.curve-left & .curve-right)。

内部的 div 应该有边，这样它们每个都有一半的曲线。因此，如果您的曲线下降 10 像素并水平移动 20 像素，则它的高度应为 10 像素，宽度应为 20 像素。然后将其左上角或右上角的边框半径设置为 100%。现在曲线将穿过整个 div。然后你可以给它一个灰色的背景颜色和背景中的父 div 白色。然后使用一些简单的 CSS 技巧将 .pointy-div 居中并制作背景，瞧，你的曲线三 Angular 形 Y 形东西就出现了。

下面的例子。

#c1 {
  position: relative;
  width: 200px;
  height: 190px;
  overflow: hidden;
}
#c2 {
  position: relative;
  top: 0px;
  width: 200px;
  height: 200px;
  background-color: gray;
}
.pointy {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 10px;
  background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");
  background-position:center bottom;
}
.pointy>.curve-left,
.pointy>.curve-right{
  position:absolute;
  background-color:red;
  width:20px;
  height:10px;
  background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");
  }
.pointy>.curve-left{
  border-top-right-radius:100%;
  background-position:120px 0;
  left:0;
  }
.pointy>.curve-right{
  border-top-left-radius:100%;
  background-position:80px 0;
  right:0;
  }

<div id="c1">
  <img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
</div>
<div id="c2">
  <div class="pointy">
    <div class="curve-left"></div>
    <div class="curve-right"></div>
  </div>
  <img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" />
</div>