对线性渐变的片段应用不同的角度

Question

如何对渐变的各个部分应用不同的角度，例如红色和蓝色渐变为 45 度，绿色为 90 度，就像下图一样吗？

.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

对我来说听起来是一个圆锥梯度：

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

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

或

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

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

或者可能是具有线性渐变的多层

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

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

对线性渐变的片段应用不同的角度

Applying different angles to segments of a linear-gradient

css

linear-gradients