0

I'm trying to make this effect using skewed divs This is my HTML.

.one,
.three,
.two {
  width: 50%;
  height: 0;
  -moz-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  -o-transform: skew(-30deg, 0deg);
  -ms-transform: skew(-30deg, 0deg);
  transform: skew(-30deg, 0deg);
  padding-bottom: 30rem;
  position: absolute;
  top: 0;
  box-shadow: inset 18px 18px 48px 16px rgba(0, 0, 0, 0.5);
}

.one {
  background: #ff0;
  z-index: 75;
  left: -15%;
}

.two {
  background: blue;
  left: 30%;
  z-index: 77;
}

.three {
  background: red;
  z-index: 79;
  left: 70%;
}

.one:before,
.three:before,
.two:before {
  content: "";
  transform: skewX(30deg);
  -ms-transform: skewX(30deg);
  /* IE 9 */
  -webkit-transform: skewX(30deg);
  /* Safari and Chrome */
  background-repeat: no-repeat;
  background-position: top left;
  /* new styles */
  position: absolute;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  width: 1000%;
  /* something ridiculously big */
  height: 1000%;
  /* something ridiculously big */
}

.one:before {
  background-image: url('https://www.readinbrief.com/wp-content/uploads/2017/12/gadgets-2018.jpg');
  z-index: 76;
}

.two:before {
  background-image: url('https://i.pinimg.com/originals/6c/0d/de/6c0dde4564bd293d93e2282e727002b1.jpg');
  z-index: 78;
}

.three:before {
  background-image: url('https://www.wired.com/wp-content/uploads/2015/03/zte-spro2_0201-1024x768.jpg');
  z-index: 80;
}
<div class="row">
  <div class="one">One</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

Right now, I'm not able to get it quite right. The first image is looking fine, i want all images to occupy their respective box space completely. What am I missing? what is the proper way to do something like this?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
anoop chandran
  • 1,460
  • 5
  • 23
  • 42
  • this may help you : https://stackoverflow.com/questions/49289529/unskewing-the-ends-of-an-assortment-multiple-skewed-images/49289555#49289555 – Temani Afif Dec 03 '18 at 13:55
  • this one too: https://stackoverflow.com/questions/49287110/5-images-symmetrically-seperated-with-diagonal-lines/49287285#49287285 – Temani Afif Dec 03 '18 at 13:55

0 Answers0