具有背景图像的对称 div 没有剪辑路径答案

【问题标题】：symetric div with background image without clip-path具有背景图像的对称 div 没有剪辑路径
【发布时间】：2019-12-02 00:16:28
【问题描述】：

大家好，我有两个不同的带有背景图像的 div，如图所示。它们是对称的。我通过剪辑路径实现了这一点，但众所周知，它并没有得到所有浏览器的良好支持，你们能否给我一个替代方案来实现更兼容。您的帮助将不胜感激。谢谢！

body {
  margin: 0;
  /* background: red; */
  padding: 100px 0;
}

.container_first {
  clip-path: polygon(0 0, 100% 14%, 100% 90%, 0% 100%);
  background-image: url(images/img12.jpg);
  min-height: 500px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.container_second {
  margin-top: -54px;

  clip-path: polygon(0% 10%, 100% 0, 100% 100%, 0 86%);
  background-image: url(images/img22.jpg);
  min-height: 500px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

【问题讨论】：

标签： html css

【解决方案1】：

使用倾斜变换：

.first,
.second {
  height:300px;
  transform-origin:left;
  overflow:hidden;
}

.first {
  transform:skewY(4deg);
}
.first > div {
  height:100%;
  background:url(https://picsum.photos/id/10/800/800) center/cover;
  transform:skewY(-4deg);
  transform-origin:left;
}
.second {
  transform:skewY(-4deg);
}
.second > div {
  height:100%;
  background:url(https://picsum.photos/id/1045/800/800) center/cover;
  transform:skewY(8deg); /* twice the skew here so you may need another skew for the content*/
  transform-origin:right;
}

<div class="first">
  <div></div>
</div>
<div class="second">
  <div></div>
</div>

【讨论】：