Html 带背景图像且不带剪辑路径的对称div

大家好，我有两个不同的div和背景图像，如图所示。它们是符号学。我用clip-path实现了这一点，但正如大家所知，并不是所有的浏览器都能很好地支持它，你们能给我一个更兼容的替代方案来实现这一点吗。谢谢你的帮助。谢谢

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;
}

---

使用倾斜变换：

。首先，
.第二{
高度：300px；
变换原点：左；
溢出：隐藏；
}
.首先{
变换：歪斜（4deg）；
}
.first>div{
身高：100%；
背景：url(https://picsum.photos/id/10/800/800)中心/盖；
变换：歪斜（-4deg）；
变换原点：左；
}
.第二{
变换：歪斜（-4deg）；
}
.second>div{
身高：100%；
背景：url(https://picsum.photos/id/1045/800/800)中心/盖；
变换：歪斜（8deg）；/*此处歪斜的两倍，因此您可能需要对内容进行另一次歪斜*/
变换原点：右；
}

---

使用倾斜变换：

。首先，
.第二{
高度：300px；
变换原点：左；
溢出：隐藏；
}
.首先{
变换：歪斜（4deg）；
}
.first>div{
身高：100%；
背景：url(https://picsum.photos/id/10/800/800)中心/盖；
变换：歪斜（-4deg）；
变换原点：左；
}
.第二{
变换：歪斜（-4deg）；
}
.second>div{
身高：100%；
背景：url(https://picsum.photos/id/1045/800/800)中心/盖；
变换：歪斜（8deg）；/*此处歪斜的两倍，因此您可能需要对内容进行另一次歪斜*/
变换原点：右；
}