在带有背景图像的 div 中制作曲线

Question

我忙于一项任务，在互联网上找不到任何解决方案。 我有这种情况：

图像 1 和 2 具有背景图像。

我需要一张第一张或第二张图片有凹凸。
如果它是第一张图片，则该凹凸应延伸 div 底部并覆盖第二张背景。
如果它是 2nd div，那么我需要像顶部的火山口/洞一样，并且在 1st div 之下。

我无法将我的图像剪切为 .png/.gif 并使用 Photoshop 中的凹凸进行剪切。这些图片是客户修改的，所以他不能一直准备准确的图片，所以我需要通过代码来扩展它们。

我尝试使用radial-gradient() 背景并使用svg 进行剪切，但Firefox 不支持这些。

是否可以使用适应所有背景图像的代码来做到这一点？

Answer 1

这里有一个使用 background-size:cover 的解决方案，这样更容易适应。 （使用已知尺寸的图像会更容易）。

缺点是标记有点复杂，需要3个辅助div。

曲线是标准的边界半径，因此可以根据需要进行调整

.container {
  width: 600px;
  height: 400px;
  border: solid 1px blue;
  position: relative;
}
.up {
  width: 100%;
  height: 50%;
  position: relative;
  border-bottom: 40px solid transparent;
  background-image: url(http://lorempixel.com/600/400);
  background-size: cover;
  background-position: center bottom;
  background-origin: border-box;
  background-clip: padding-box;
  margin-bottom: -40px;
}
.addon {
  width: 25%;
  height: calc(100% + 40px);
  position: absolute;
  left: 37.5%;
  border-radius: 0px 0px 50px 50px;
  overflow: hidden;
  background-image: inherit;
  z-index: 2;
}
.addon:before {
  content: "";
  position: absolute;
  width: 400%;
  height: 100%;
  left: -150%;
  background-image: inherit;
  background-size: cover;
  background-position: center bottom;
  background-origin: padding-box;
  background-clip: padding-box;
}
.down {
  width: 100%;
  height: 50%;
  position: relative;
  bottom: 40px;
  border-top: 40px solid transparent;
  background-image: url(http://lorempixel.com/400/200);
  background-size: cover;
  background-position: center top;
  background-origin: border-box;
  background-clip: padding-box;
  margin-top: -40px;
}
.addleft {
  width: 37.5%;
  height: calc(100% + 40px);
  position: absolute;
  left: 0px;
  bottom: 0px;
  border-radius: 0px 50px 0px 0px;
  overflow: hidden;
  background-color: tomato;
  background-image: inherit;
  background-size: 0px 0px;
}
.addleft:before {
  content: "";
  position: absolute;
  width: 266.667%;
  height: 100%;
  left: 0px;
  background-image: inherit;
  background-size: cover;
  background-position: center top;
  background-origin: padding-box;
  background-clip: padding-box;
}
.addright {
  width: 37.5%;
  height: calc(100% + 40px);
  position: absolute;
  right: 0px;
  bottom: 0px;
  border-radius: 50px 0px 0px 0px;
  overflow: hidden;
  background-image: inherit;
  background-size: 0px 0px;
}
.addright:before {
  content: "";
  position: absolute;
  width: 266.667%;
  height: 100%;
  right: 0px;
  background-image: inherit;
  background-size: cover;
  background-position: center top;
  background-origin: padding-box;
  background-clip: padding-box;
}

<div class="container">
  <div class="up">
    <div class="addon"></div>
  </div>
  <div class="down">
    <div class="addleft"></div>
    <div class="addright"></div>
  </div>
</div>

Answer 2

你需要使用边框颜色

border-color：透明透明#555透明；

基本上，您需要将图像边框颜色的左右百分比标记为透明。

然后设置border-radius给出曲线

谢谢。