Is there a way to modify the height of .half-containers1 and .half-containers2?
Additionally, how can I create the triangle shape that is shown in the image? Is it achievable with CSS alone or do I need to use an image?
Check out my fiddle for reference and the layout image I am attempting to replicate.
html,
body {
margin: 0;
height: 100%;
}
div {
box-sizing: border-box;
border: 0.5px solid red;
}
.main-container {
height: 100%;
display: flex;
}
.left-container {
flex: 1 1 0;
}
.center-container {
flex: 1 1 0;
display: flex;
flex-direction: column;
.right-container {
flex: 1 1 0;
display: flex;
flex-direction: column;
}
.half-containers1 {
flex: 1;
height: 400px;
}
.half-containers2 {
flex: 1;
height:100px;
background-image: url("https://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png")
}<div class="main-container">
<div class="left-container">Left container</div>
<div class="center-container">
<div class="half-containers1">
<p>Center</p>
</div>
<div class="half-containers2">Center2</div>
</div>
<div class="right-container">
Right container
</div>
</div>