Applying different angles to segments of a linear-gradient

Question

How can I apply different angles to the segments of a gradient, e.g. have the red and blue gradients at 45 degrees and green at 90 just like the image below?

.gradient1 {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(90deg, red 0%, blue 50%, green 50%);
  margin-bottom: 10px;
}

.gradient2 {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(45deg, red 0%, blue 50%, green 50%);
}

<div class="gradient1"></div>
<div class="gradient2"></div>

Answer 1

sounds a conic-gradient to me:

.box {
  width:200px;
  height:200px;
  background:conic-gradient(from -90deg at bottom,red,blue , green 90deg);
}

<div class="box"></div>

Or

.box {
  width:200px;
  height:200px;
  background:conic-gradient(from -90deg at bottom,red,blue 90deg, green 0);
 }

<div class="box"></div>

Or maybe multiple layers with a linear-gradient

.box {
  width:200px;
  height:200px;
  background:
   linear-gradient(45deg,red,blue) left/50% 100% no-repeat
   green;
 }

<div class="box"></div>