Two gradients with two distinct sections with just one div element - html

Question

I was wondering if it is possible to create a background effect like in the image below using just one div.
I know how to achieve it with two divs, but my situation would make it really easy if it could be done in one div (maybe using :after ???). The code for the gradients is:
.bg-green {
background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}
.bg-red {
background-image: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%;
}
Thanks :)

Answer 1

Yes, this is possible using a single div with a :pseudo-element.
What you could do is add the second linear-gradient to its :after :pseudo-element. Notice the use of rgba(r, b, g, a) instead of hex colors. This way you could control the opacity of the second linear-gradient by changing its alpha value.
body, html {
height: 100%;
margin: 0;
}
div {
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(110deg, #5EDC29 45%, #FF0058 45%, #FF0058 100%);
z-index: -1;
}
div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}
<div></div>
If you want the exact same gradient colors that you've posted in your question, you'll need clipPath.
body {
background: #222222;
margin: 0;
}
.bg {
width: 500px;
height: 300px;
background: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%);
}
.bg-2 {
position: absolute;
width: 500px;
height: 300px;
top: 0;
z-index: -1;
background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}
<svg width="500" height="300">
<defs>
<clipPath id="shape">
<path d="M300,0 L501,0 L501,301 L175,301z" />
</clipPath>
</defs>
<foreignObject clip-path="url(#shape)" width="500" height="300">
<div class="bg"></div>
</foreignObject>
</svg>
<div class="bg-2"></div>

Answer 2

You can get this effect, but you will need to set overflow hidden on the div and to set the background in a after pseudo class
.test {
width: 400px;
height: 300px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
width: 160%;
height: 160%;
top: -30%;
left: -30%;
background-image: linear-gradient(-210deg, #95D428 0%, #20560B 100%), linear-gradient(-210deg, #F5515F 0%, #8E0A1E 100%);
background-position: top left, top right;
background-size: 50% 100%;
background-repeat: no-repeat;
-webkit-transform: rotate(30deg);
}
<div class="test"></div>
The after is rotated to get the inclined separation. The dimensions need to be bigger so as not to show missing corners.
And then, you assign the 2 linear gradients as 2 separate background-images,inclined an additional 30deg to compensate for the base inclination