html - symetric div with background image without clip-path

Question

hi guys i have two differents div with background image, as you see in the picture. They are symetrics. i achieved that with clip-path, but as know it's not well supported by all browsers, could you guys give me an alternative to achieve that to be more compatible. Your help would be appreciated. Thx!

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

Use skew transformation:

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