CODEWITHSUNDEEP
javascriptcsscss-calccss-gradients
Konstii ii
Konstii ii

Reputation: 3

CSS HSL-Triangle

I try to build a website with a color picker.

For that, I would like to use some sort of semicircle with which you can choose the hue and a triangle with which you can choose the saturation and lightness.

See the triangle in the middle

I got my semicircle/color wheel and also the triangle shape so I only need the background/color of the triangle.

For that, I need a linear-gradient in another linear-gradient (like a gradient-array).

#colorTriangle {
    width: 250px;
    height: 200px;
    background-image: linear-gradient(hsl(0, 100%, 50%), linear-gradient(hsl(0, 0%, 100%), hsl(0, 100%, 0%)));
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
<div id="colorTriangle"></div>

Upvotes: 0

Views: 169

Answers (2)

Kosh
Kosh

Reputation: 18378

Since your triangle supposed to be equilateral, its height would be h = (a√3)/2.
Or here we can use h = 0.866a.

And instead of linear-gradient I'd use radial-gradient:

#colorTriangle {
    --a: 250px;
    width: var(--a);
    height: calc(.866 * var(--a));
    background-color:#777;
    background-image: 
      radial-gradient(circle at 50% 0, hsl(0, 100%, 50%), #0000 var(--a)),
      radial-gradient(circle at 100% 100%, hsl(0, 0%, 100%), #0000 var(--a)), 
      radial-gradient(circle at 0 100%, hsl(0, 100%, 0%), #0000 var(--a));
    background-blend-mode:hard-light;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
<div id="colorTriangle"></div>

Upvotes: 0

isherwood
isherwood

Reputation: 61056

The linear-gradient term should not appear twice in your property value. You're effectively nesting gradients here. Take the second one out, along with the extra closing parenthesis.

#colorTriangle {
    width: 250px;
    height: 200px;
    background-image: linear-gradient(
      hsl(0, 100%, 50%), 
      hsl(0, 0%, 100%), 
      hsl(0, 100%, 0%)
    );
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
<div id="colorTriangle"></div>

Upvotes: 0

Related Questions