I'm trying to make a background shape with a triangle inclusion using CSS. I want it to be responsive to all screen sizes, but I'm having some trouble. Any tips on how to achieve this?
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>How can I ensure the expected result is achieved for every screen size?