具有背景图像的对称div，没有剪切路径 [英] symetric div with background image without clip-path

问题描述

大家好，我在背景图片上有两个不同的div，如您在图片中所见.它们是对称的.我是通过clip-path实现的，但是众所周知，并不是所有浏览器都很好地支持它，所以你们可以给我一种替代方法，使其更加兼容.您的帮助将不胜感激.谢谢！

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

推荐答案

使用倾斜变换:

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

这篇关于具有背景图像的对称div，没有剪切路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！