具有“嵌套”渐变的 CSS 角度线性渐变

Question

这就是我想要实现的目标：

浅蓝色线只是标记。我想要一个距离中心固定像素（向左）的角度。我还希望左侧的深蓝色也成为渐变。

我可以制作我需要的角度，但我坚持将其放置在距离中心的固定点上，并使较暗的部分成为另一个有角度的渐变：

.topbar {
  height: 150px;
  background: rgb(28,25,84);
  background: linear-gradient(-63deg, rgba(28,25,84,1) 50%, rgba(20,18,63,1) 0);
}

<div class="topbar"></div>

谢谢！

Answer 1

您可以有多个背景，如下所示：

我将距中心的固定距离设为从中心200px移动一半的一个渐变的宽度：200px

.topbar {
  height: 150px;
  background: 
    
    /* the markers*/
    linear-gradient(yellow 0 0) 25% /2px 100%,
    linear-gradient(yellow 0 0) 50% /2px 100%,
    linear-gradient(yellow 0 0) 75% /2px 100%,
    /* the needed background*/
    linear-gradient(-63deg, rgba(28,25,84,1) 50%,transparent 0) calc(50% - 100px) 0/200px 100%,
    linear-gradient(rgba(28,25,84,1),rgba(28,25,84,1)) right/50% 100%,
    linear-gradient(to bottom, red,blue);
  background-repeat:no-repeat;
}

<div class="topbar"></div>

您可以检查此答案以获取有关如何background-position使用百分比值的更多详细信息：Using Percentage Values with background-position on a Linear-gradient