JSFiddle - React, Tailwind, and code Playground

by Strernd

HTML

<div class="wrap">

<div class="stripe stripe0">

</div>
<div class="stripe stripe1">

</div>
<div class="stripe stripe2">

</div>
<div class="stripe stripe3">

</div>
<div class="stripe stripe4">

</div>
<div class="stripe stripe5">

</div>
<div class="stripe stripe6">

</div>
<div class="stripe stripe7">

</div>
<div class="stripe stripe8">

</div>
<div class="stripe stripe9">

</div>
<div class="stripe stripe10">

</div>
<div class="stripe stripe11">

</div>
<div class="stripe stripe12"/>

</div>
<div class="stripe stripe13">

</div>
<div class="stripe stripe14">

</div>
<div class="stripe stripe15">

</div>
<div class="stripe stripe16">

</div>
</div>

SCSS

$n : 17;
$w : 827px;
$h : 1063px;
$p : $w/$n;

.wrap{
  width: $w;
  height: $h;
}

.stripe {
  background-image: url("https://i.imgur.com/LNnLAhD.jpg");
  height: $h;
  width: $p;
  float: left;
}

@for $i from -8 through 8{
    .stripe#{$i}{
      transform: skewY(($i)*-10deg) translate($i*15px,0px);
      background-position: right $i*$p bottom 0px;
    }

}