Responsive triangle divs - html

Question

I need to create a responsive triangle <div>. I was able to create it using css skewed, but it is not responsive, when I change the screen width it gets messed up. Can someone help me? Thank you very much in advance!
Here is what I want:
This is the code I have so far:
.skewed-box-one:before {
background-color: red;
content: '';
height: 100px;
width: 30.05%;
display: block;
visibility: visible;
position: absolute;
top: -40px;
transform: skewY(8deg);
border-top: 3px solid #BBDEFB;
}
.skewed-box-one:after {
background-color: red;
content: '';
height: 130px;
width: 70%;
display: block;
visibility: visible;
position: absolute;
top: -46px;
right: 0;
transform: skewY(-4deg);
border-top: 3px solid #BBDEFB;
}
<div class="skewed-box-one"></div>

Answer 1

You could use CSS clip-path, do note that broswer support is limited. With this tool you can generate the shape you want.
.triangle1 {
clip-path: polygon(50% 0%, 100% 84%, 100% 100%, 0 100%, 0 84%);
background: red;
width: 100%;
height: 100%;
}
.triangle2 {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);;
background: red;
width: 100%;
height: 100%;
}
.container {
width: 50%;
height: 300px;
margin-bottom: 20px;
}
<div class="container">
<div class="triangle1">1</div>
</div>
<div class="container">
<div class="triangle2">2</div>
</div>

Answer 2

I could solve this problem with #SuperDJ help, usingclip-path. I also find this website that helps to draw shapes:
https://bennettfeely.com/clippy/
Here is the final code i used:
.triangle1 {
position: absolute;
-webkit-clip-path: polygon(21% 96%, 0 54%, 100% 54%);
clip-path: polygon(21% 96%, 0 54%, 100% 54%);
background: #BBDEFB;
width: 100%;
height: 200px;
margin-top: -40px;
}
Thanks very much everybody that tryed to help and a special thanks to #SuperDJ!

Answer 3

Here is another idea more supported than clip-path using background coloration
.box-down {
height:80px;
padding-bottom:50px;
background:
linear-gradient(to bottom right,red 48%, transparent 50%) bottom right/30% 50px,
linear-gradient(to bottom left ,red 48%, transparent 50%) bottom left/70.1% 50px,
red content-box;
background-repeat:no-repeat;
}
.box-up {
height:80px;
padding-top:50px;
background:
linear-gradient(to top right,red 48%, transparent 50%) top right/70% 50px,
linear-gradient(to top left ,red 48%, transparent 50%) top left /30.1% 50px,
red content-box;
background-repeat:no-repeat;
margin-top:20px;
}
<div class="box-down"></div>
<div class="box-up"></div>