CODEWITHSUNDEEP
htmlcss
Emmann
Emmann

Reputation: 63

symetric div with background image without 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;
}

Upvotes: 1

Views: 129

Answers (1)

Temani Afif
Temani Afif

Reputation: 273626

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>

Upvotes: 4

Related Questions