在带有背景图像的div中创建一条曲线

Question

我遇到了一项任务，我无法通过互联网找到任何解决方案。 我有这种情况：

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

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

我无法将我的图像剪切为.png / .gif并在photoshop中剪切。这些图像由客户端更改，因此他无法一直准备精确的图像，因此我需要通过代码扩展它们。

我尝试使用径向渐变（）背景并使用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

border-color：透明透明＃555透明;

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

然后设置 border-radius 以提供曲线

感谢。