How to make skew not affect gradient css - html

Question

i'm trying to apply a gradient to a skewed div but the gradient starts where the skew starts and it doesn't apply the gradient i'm looking for no matter what angle i use.
This is the gradient i'm trying to replicate
but I get a very different result...the colors are off and it's too green on the right side of mine. You can notice that on the image above, the gradient starts at the little wedge at the bottom but mine starts on the entire bottom part.
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);;
transform: skewY(-12deg);
transform-origin: 0;
}
<div class="main">
<div class="skew-div">
</div>
</div>
is this possible without just placing the image as a background?

Answer 1

Use clip-path
.main {
height: 80vh;
background-color: white;
position:relative;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>

Answer 2

You can use clip-path property
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
;
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>

Answer 3

Instead of using transform: skewY() you may use clip-path property. transform sometimes creates some sudden confusing problems. That's why you should sometimes escape using that property. Else use it using proper Browser Vendor Prefixes.
If you feel any difficulty configuring clip-path property then you may use this 3rd party website for clip-path value generation =>
https://bennettfeely.com/clippy/