Triple 'Rhomboid' Image Split CSS - html

Question

I'm trying to re-design a website homepage.
How can I split the full screen background image currently being used into 3 sections, with a gap between each with the image only being shown within the Rhomboid shape?
I've looked around and have found the CSS + HTML to create the Rhomboid with the image inside however it's the whole image and only one of these Rhomboid shapes.
.polygon-each {
padding: 10px;
text-align: center;
}
.polygon-each-img-wrap img {
margin-bottom: 10px;
}
.polygon-each img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
img {
max-width: 100%;
height: auto;
}
.polygon-clip-rhomboid {
-webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
-webkit-clip-path: url("#polygon-clip-rhomboid");
clip-path: url("#polygon-clip-rhomboid");
}
<div class="polygon-each">
<div class="polygon-each-img-wrap">
<img src="/img/rules-bgrnd.png" alt="demo-clip-rhomboid" class="polygon-clip-rhomboid">
</div>
<svg class="clip-svg">
<defs>
<clipPath id="polygon-clip-rhomboid" clipPathUnits="objectBoundingBox">
<polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
</clipPath>
</defs>
</svg>
</div>
A view of what is currently shown can be seen here

Answer 1

One way you could do this is just by utilizing a more complex clipping path that has three rhomboids in it. There are some tools that help you "draw" the path you want and generate the CSS for you, http://bennettfeely.com/clippy/ is one I was able to find, but there seem to be more as well.
Essentially, you want your path to have points positioned in a way where it looks like you're creating three different shapes, even though it's all one clip.
.polygon-each {
padding: 10px;
text-align: center;
}
.polygon-each-img-wrap img {
margin-bottom: 10px;
width:100%;
-webkit-clip-path: polygon(0% 100%, 15% 0, 33% 0%, 18% 100%, 32% 100%, 46% 0, 66% 0, 52% 100%, 68% 100%, 80% 0%, 100% 0%, 91% 100%);
clip-path: polygon(0% 100%, 15% 0, 33% 0%, 18% 100%, 32% 100%, 46% 0, 66% 0, 52% 100%, 68% 100%, 80% 0%, 100% 0%, 91% 100%);
}
.polygon-each img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
img {
max-width: 100%;
height: auto;
}
https://jsfiddle.net/bjc89nkv/
There's a quick and messy demo of what I was able to "draw" to create such an effect.