Flex box layout,adjusting height of a block - html

Question

How can I adjust height of .half-containers1 and .half-containers2?
And what's the best way to get that triangle I've marked in the image? is it possible with css only? or i must use image?
Here is my fiddle and the
Image of layout I'm trying to do
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>

Answer 1

use flex-basis (flex: 0 X shorthand) in your halfcontainers and use ::after for doing the triangle
html,
body {
margin: 0;
height: 100%;
}
div {
box-sizing: border-box;
border: 1px solid red;
}
.main-container {
height: 100%;
display: flex;
}
.left-container {
flex: 1;
}
.center-container, .right-container {
flex: 1;
display: flex;
flex-direction: column;
}
.half-containers1 {
flex: 0 70% /*400px*/;
position: relative;
}
.half-containers1::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 10px white;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
.half-containers2 {
flex: 0 30%/*100px*/;
background: url("https://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png") no-repeat center / cover
}
<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>