html - 具有背景图像的对称div，没有剪切路径(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.

(嗨，大家好，我在背景图片中有两个不同的div，如图所示。)

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.

(我通过clip-path实现了这一目标，但是众所周知，并不是所有浏览器都很好地支持它，所以你们可以给我一个替代方案，使其更兼容。)

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

  ask by Emmann translate from so

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>