How to make responsive to element triangle shape? - html

Question

I want background shape to include triangle shape and I did it with css. I want that to be responsive in every screen size. I am stuck in this . Any advice ...
header {
width: 100%;
height:150px;
background: #eee;
}
main {
width: 100%;
height:150px;
background: #000;
position:relative;
z-index: 1;
}
main::before {
background: inherit;
top: 0;
content: '';
display: block;
height: 90%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-3deg);
transform-origin: 0;
z-index: -1;
}
main::after {
border-top: 16vh solid blue;
border-left: 50vw solid transparent;
width: 0;
height: 0;
transform: skewY(-3deg);
position: absolute;
content: "";
transform-origin: 0;
right: 0;
top: -10%;
}
<header></header>
<main>
<main>
Expected result in every screen size

Answer 1

You can use clip-path - polygon properties for this.
The issue is, this doesn't support on IE 🤷‍♂️
More information
Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
W3Schools: https://www.w3schools.com/cssref/css3_pr_clip-path.asp
CSS Tricks: https://css-tricks.com/almanac/properties/c/clip-path/
main {
position: relative;
width: 100%;
height: 150px;
background: #000;
z-index: 1;
overflow: hidden;
}
main::before,
main::after {
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
main::before {
background-color: #00f;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
}
main::after {
background-color: #fff;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}
<main><main>

Answer 2

You can try like below:
html::before {
content: "";
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60vh;
transform-origin: right;
transform: skewY(-5deg);
background: linear-gradient(-160deg, blue 15vw, #000 15.2vw);
}

Answer 3

I really dont want to answer my own question though, I have been research for about two days and I found something really effective solution. So let me post it .
If I have modify a little bit on main::after property , it can be show responsively now.
transform-origin: 0; to transform-origin: -99%;
top: -10% to top: 0
That is...