如何使用 CSS 创建鸥翼形状

Question

我正在尝试创建一个带有背景图像（背景大小：封面）的 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 居中并设置背景，瞧，这就是你弯曲的三角形的东西。

下面的例子。

#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>

Answer 2

在这里，您可以使用几个具有边框半径的伪元素来创建弯曲的形状。

^{请注意，此演示中有多个元素来展示如何在实践中使用它}

.image {
  height: 300px;
  width: 80%;
  background: url(http://lorempixel.com/900/500);
  position: relative;
  display: inline-block;
}
.shape {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: url(http://lorempixel.com/900/400);
  background-position: 0 60px;
}
.shape:before,
.shape:after {
  content: "";
  position: absolute;
  background: inherit;
  height: 100%;
  top: 0;
  width: 50%;
  transform: translateY(-100%);
}
.shape:before {
  left: 0;
  border-radius: 0 50% 0 0;
  background-position: 0 90px;
}
.shape:after {
  left: 50%;
  border-radius: 50% 0 0 0;
  background-position: -100% 90px;
}

<div class="image">
  <div class="shape"></div>
</div>

---

另一种更实用的方法（具有响应能力），类似于：

.wrap{
  width:100%;display:inline-block;
  position:relative;
  height:600px;
  }
.wrap img:first-child{
  top:0;z-index:5;
  }
.wrap img:last-child{
  top:40%;
  }
.wrap img{
  position:absolute;
  height:50%;width:100%;
  }
.wrap .splitter{
  z-index:10;
  position:absolute;
  top:40%; width:100%;
  height:10%;
  }
.wrap .splitter:before, .wrap .splitter:after{
  content:"";
  position:absolute;
  width:50%;
  height:100%;
  background-size:200% 500%;

  border-radius: 0 100% 0 0;
}

.wrap .splitter:after{
  left:50%;
  background-position:-100% 0;
  border-radius: 100% 0 0 0;
}
.wrap .partA:before, .wrap .partA:after{  background-image:url("http://lorempixel.com/450/250");}

<div class="wrap">
<img src="http://lorempixel.com/900/500"/>
  <span class="splitter partA"></span>
<img src="http://lorempixel.com/450/250"/>
</div>