Use multiple background if it's only about visual result:
.box {
width:250px;
height:150px;
background:
linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom right/50% 50%,
linear-gradient(to bottom right,transparent 49.5%,purple 50%) bottom right/50% 200%,
linear-gradient(to bottom left ,transparent 49.5%,yellow 50%) bottom left/50% 50%,
linear-gradient(to bottom left ,transparent 49.5%,red 50%) bottom left/50% 200%,
blue;
background-repeat:no-repeat;
}
<div class="box">
</div>
Here is an idea with clip-path if you want to consider different divs:
.box {
width:450px;
height:250px;
position:relative;
overflow:hidden;
z-index:0;
}
.box > div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-size:cover;
background-position:center;
}
.box > div:nth-child(2),
.box > div:nth-child(4){
right:50%;
-webkit-clip-path:polygon(0 0,100% 100%, 0 100%);
clip-path:polygon(0 0,100% 100%, 0 100%);
}
.box > div:nth-child(3),
.box > div:nth-child(5){
left:50%;
-webkit-clip-path:polygon(100% 0,100% 100%, 0 100%);
clip-path:polygon(100% 0,100% 100%, 0 100%);
}
.box > div:nth-child(2),
.box > div:nth-child(3){
top:-50%;
}
.box > div:nth-child(4),
.box > div:nth-child(5){
top:50%;
}
/*Irrelevant, simply to illustrate hover effect*/
.box > div:hover {
filter:grayscale(100%);
}
<div class="box">
<div style="background-image:url(https://picsum.photos/id/1/1000/800)"></div>
<div style="background-image:url(https://picsum.photos/id/10/1000/800)"></div>
<div style="background-image:url(https://picsum.photos/id/90/1000/800)"></div>
<div style="background-image:url(https://picsum.photos/id/102/1000/800)"></div>
<div style="background-image:url(https://picsum.photos/id/118/1000/800)"></div>
</div>