使用“嵌套”渐变的CSS角度线性渐变

Question

使用“嵌套”渐变的CSS角度线性渐变

4

我想要实现的目标如下图所示：

浅蓝色线条只是标记。我想要一个从中心（偏向左侧）固定像素的角度，而且我也想让左边的深蓝色成为渐变色。

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

.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>

谢谢！

- Dominic

你可以使用 repeating-linear-gradient 吗？ - Mr Lister

感谢@MrLister提供的信息，如果不是TermaniAfif一直在那里，它对我产生了足够好的效果。 - Dominic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

你可以像下面这样拥有多个背景：

我将距离中心的固定距离设置为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 工作原理的详细信息：在线性渐变上使用百分比值和 background-position。