Div divided into five traingles - css

Question

Here I'm trying to divide a <div> into 5 different triangles.
I have tried using CSS using borders but couldn't achieve the desired output. Can anyone point me in the right direction. How should I achieve this output.
.box {
display: flex;
width: 100%;
height: 100vh;
background-color: #ccc;
}
.traingle {
width: 20%;
height: 400px;
border: 3px solid #000;
}
<div class="box">
<div class="traingle"></div>
<div class="traingle"></div>
<div class="traingle"></div>
<div class="traingle"></div>
<div class="traingle"></div>
</div>

Answer 1

SVG and a number of polygons
div {
width: 80%;
margin: 1em auto;
}
<div>
<svg viewbox="0 0 200 100">
<polygon points="0,100 100,100 0,50 "
style="stroke:#000000; fill:#ff0000; stroke-width: 1;"/>
<polygon points="0,50 100,100 50,00 0,0 "
style="stroke:#000000; fill:#00ff00; stroke-width: 1;"/>
<polygon points="100,100 50,00 150,0"
style="stroke:#000000; fill:#0000ff; stroke-width: 1;"/>
<polygon points="100,100 200,50 200,0 150,0"
style="stroke:#000000; fill:#00ffff; stroke-width: 1;"/>
<polygon points="100,100 200,100, 200,50"
style="stroke:#000000; fill:#ff00ff; stroke-width: 1;"/>
</svg>
</div>

Answer 2

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>