CSS skew angle align with 3 rows - html

Question

See attached image below. I want to preserve it with pure CSS. That means I'm only looking for a CSS only solution.
Using this CSS code I can get middle row (look at the image) as I needed. But not for top and bottom rows. Problem is skew angle is not align like image.
.slider-single {
position: relative;
background: #f5f5f5;
padding-top: 70px;
padding-bottom: 70px;
}
.slider-single::before {
content: "";
position: absolute;
background: #0072c6;
width: 100%;
height: 100%;
right: 0;
top: 0;
transform: skewX(-16deg) translateX(-50%);
z-index: -1;
}
.skew-bar-top {
position: absolute;
height: 40px;
background: red;
width: 100%;
top: 0;
left: 0;
}
.skew-bar-top::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #21255d;
transform: skewX(-16deg) translateX(-50%);
}
<div class="slider">
<div class="slider-single with-bg img">
<div class="skew-bar-top"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 col-lg-6">
-- contents
</div>
<div class="col-md-6 col-lg-6">
-- contents
</div>
</div>
</div>
<div class="skew-bar-bottom"></div>
</div>
</div>

Answer 1

You don't need 3 rows, you can keep only one and play with backgrounds
.container {
height: 400px;
border: solid #0000;
border-width: 50px 0; /* control the width of the top/bottom border */
background:
/* the middle gradient */
linear-gradient(110deg, blue 50%,red 50.1%) padding-box,
/* the border gradient*/
linear-gradient(110deg,red 50%,yellow 50.1%) border-box;
background-origin: border-box;
background-clip: padding-box,border-box;
}
<div class="container">
</div>
Also like below for different coloration on each border:
.container {
height: 300px;
border-top: 50px solid #0000;
padding-bottom: 60px;
background:
/* the middle gradient */
linear-gradient(110deg,purple 50%,green 50.1%),
/* the top gradient */
linear-gradient(110deg,blue 50%,red 50.1%),
/* the bottom gradient*/
linear-gradient(110deg,red 50%,yellow 50.1%);
background-origin: border-box;
background-clip: content-box,padding-box,border-box;
}
<div class="container">
</div>

Answer 2

I made this code with looking though This website.
Now, it enables you to scale the size. However, I can not just let the middle part be bigger because it is hard to calculate the position of the angle.
Here is the code:
<title>测试</title>
<style type="text/css">
.RightAngleTrapezoid {
width:120px;height:0;margin:100px auto;
border-right:15px solid transparent;
border-top:15px solid;
position:absolute;
}
</style>
<button onclick="ChangeSize()">
Test To change size
</button>
<input id="time" value="3">
<div id="Flag" style="transform:scale(0.5,1.1)">
<div id="UpPosition">
<div class="RightAngleTrapezoid" style="color:red;transform:rotate(360deg);left:0;top:0;width:250"></div>
<div class="RightAngleTrapezoid" style="color:yellow;transform:rotate(180deg);left:250;top:0;width:180;"></div>
</div>
<div id="MiddlePosition">
<div class="RightAngleTrapezoid" style="color:blue;transform:rotate(360deg);left:0;top:15;width:170;border-right:80px solid transparent;border-top:90px solid"></div>
<div class="RightAngleTrapezoid" style="color:red;transform:rotate(180deg);left:170;top:15;width:195;border-right:80px solid transparent;border-top:90px solid"></div>
</div>
<div id="DownPosition">
<div class="RightAngleTrapezoid" style="color:red;transform:rotate(360deg);left:0;top:105;width:155"></div>
<div class="RightAngleTrapezoid" style="color:yellow;transform:rotate(180deg);left:155;top:105;width:275;"></div>
</div>
</div>
<script>
function ChangeSize(){
var element = document.getElementById("Flag");
var ho = 0.5;
var ve = 1.1;
var times = document.getElementById("time").value;
console.log(element);
element.setAttribute("style", "transform:scale("+ho * times + ","+ve * times + ");");
}
</script>
Tips: You can put the code into an IDE because I do not know why it won't work with StackOverflow's test and you can test Here online.
This is the screenshot of the result(As you want):