如何为CSS HSL色彩选择三角形添加嵌套linear-gradient背景？

要给三角形添加覆盖饱和度（S）和明度（L）范围的背景，你之前的嵌套linear-gradient写法不符合CSS语法，正确的方式是叠加两层线性渐变，结合三角形的clip-path来实现完整的色彩空间：

实现原理 #

三角形的三个顶点对应三个关键色彩：

• 顶部顶点：纯白（固定色相H，S=0，L=100%）
• 左下角：纯色相（H，S=100%，L=50%）
• 右下角：纯黑（H，S=0，L=0%）

通过叠加两个渐变覆盖所有过渡：

1. 水平方向渐变：控制饱和度，从左到右从灰（S=0）过渡到纯色相（S=100%）
2. 垂直方向渐变：控制明度，从上到下从白（L=100%）过渡到黑（L=0%）
3. 用background-blend-mode让两个渐变正确混合，再通过clip-path裁成三角形形状

完整代码 #

<div id="colorTriangle"></div>

#colorTriangle {
    width: 250px;
    height: 200px;
    /* 叠加两层渐变，分别控制饱和度和明度 */
    background-image: 
        linear-gradient(to bottom, hsl(0, 0%, 100%), hsl(0, 0%, 0%)),
        linear-gradient(to right, hsl(0, 0%, 50%), hsl(0, 100%, 50%));
    /* 混合模式确保色彩过渡自然 */
    background-blend-mode: overlay;
    /* 裁剪成三角形 */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

自定义提示 #

• 修改所有hsl(0, ...)中的第一个数值（色相值），就能匹配半圆色轮选中的色相
• 调整background-blend-mode的值（比如multiply、screen）可以微调色彩过渡效果，根据视觉需求选择

内容的提问来源于stack exchange，提问作者Konstii ii