如何使用 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）。

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

所以下面的例子。

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

如何使用 CSS 创建鸥翼形状

How to create a gullwing shape with CSS

html

css

css-shapes