CSS倾斜线性渐变，带有“嵌套”渐变

Question

这是我要实现的目标：

浅蓝色线条只是标记。我想要从中心（左移）到固定px 的角度。而且我也希望左侧的深蓝色也是渐变色。

我可以设定所需的角度，但是我一直坚持将其放置在距中心不动的位置，并使较暗的部分成为另一个倾斜角度：

.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,yellow) center/2px 100%,
    linear-gradient(yellow,yellow) 25% 0/2px 100%,
    linear-gradient(yellow,yellow) 75% 0/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