带背景图像的对称 div 没有剪辑路径

Question

大家好，我有两个不同的 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;
}

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