CSS 角度线性渐变与 "nested" 渐变
CSS angled linear gradient with "nested" gradient
这就是我要实现的目标:
浅蓝色线条只是标记。我想要从中心(向左)的 固定像素 的角度。而且我还希望左边的深蓝色也是渐变色。
我可以做出我需要的角度,但我坚持将它放在离中心的固定点,并使较暗的部分成为另一个倾斜的渐变:
.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>
谢谢!
你可以有如下的多重背景:
我将距中心的固定距离设置为 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
这就是我要实现的目标:
浅蓝色线条只是标记。我想要从中心(向左)的 固定像素 的角度。而且我还希望左边的深蓝色也是渐变色。
我可以做出我需要的角度,但我坚持将它放在离中心的固定点,并使较暗的部分成为另一个倾斜的渐变:
.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>
谢谢!
你可以有如下的多重背景:
我将距中心的固定距离设置为 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