5 images symmetrically seperated with diagonal lines

I browsing around the internet and I stumbled upon this theme on reddit

enter image description here

After seeing this lovely banner. I wanted to try and emulate something like this using five symmetric images of my choice that is separated by diagonal lines just like the picture above. Maybe additionally try and put in some text on top of the assorted images. Something like this:

enter image description here

I tried re-writing something similarly online in css using cats picture

.image-container {
  width: 90%;
  height: 200px;
  position: relative;
  margin: 30px auto;
  background: black;
  overflow: hidden;
}


.image-one {
  right: 20%;
}
.image-two {
  right: 20%;
}
.image-three {
  right: 20%;
}
.image-four {
  right: 20%;
}
.image-five {
  right: 20%;
}


.image-one,
.image-two,
.image-three,
.image-four,
.image-five {
  position: absolute;
  height: 100%;
  width: 40%;
  min-width: 20px;
  -ms-transform: skewX(-25deg);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  background: white;
  overflow: hidden;
 top:0;
  margin-right: 50px;
  border: 5px solid black;
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.9);
}

.image-one:after, .image-two:after,
.image-three:after, .image-four:after,
.image-five:after{
  -ms-transform: skewX(25deg);
  -webkit-transform: skewX(25deg);
  transform: skewX(25deg);
  position: absolute;
  width: 120%;
  height: 100%;
  display: block;
  top: 0;
  content: "";
}

.image-one:after{
  right: -93px;
  background: url("http://lorempixel.com/500/400/cats") no-repeat center center;
  background-size: cover;
}
.image-two:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-three:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-four:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-five:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
      background-size: cover;
}

However, not all the cat pictures are inside of box and are also not evenly distributed

<div class='image-container'>
  <div class='image-left'></div>
  <div class='image-right'></div>
</div>


<div class='image-container'>
  <div class='image-one'></div>
    <div class='image-two'></div>
        <div class='image-three'></div>
            <div class='image-four'></div>
                <div class='image-five'></div>
</div>

enter image description here