CSS Three Tone Diagonal Background - html

Question

I am trying to create a 3 color background with colors going diagonally.
I found a great example with colors i like here: Responsive Diagonal Two-Tone Backgrounds with CSS (Corner to Corner)
.btn {
background:#212531;
background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
display:inline-block;
padding:0.75em 2.0em;
font-size:1.5em;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
text-transform:uppercase;
font-family:sans-serif;
}
.btn:hover, .btn:focus {
background:#2d3d64;
background: linear-gradient(to right bottom, #415382 50%, #2d3d64 50%);
}
body { text-align:center; background:#e6e9f6; padding-top:1.0em; }
a { text-decoration:none; }
<a class="btn" href="#">Check Out My Background</a>
I want to modify this example to have a third color, going from the bottom left corner, diagonally up to the middle of the screen and then stopping there.
How can i achieve this?

Answer 1

You can try like below. Simply consider an extra gradient with a diagonal direction.
.box {
width:200px;
height:100px;
background:
linear-gradient(to bottom left ,transparent 50%,yellow 50.5%),
linear-gradient(to bottom right,red 50%,blue 50.5%);
}
<div class="box">
</div>

Answer 2

According to this example:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
You can use something like that:
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);