CSS HSL-треугольник

Я пытаюсь создать веб-сайт с палитрой цветов.

Для этого я хотел бы использовать что-то вроде полукруга, с помощью которого вы можете выбирать оттенок, и треугольник, с помощью которого вы можете выбирать насыщенность и яркость.

CSS HSL-треугольник

У меня есть полукруг/цветовой круг, а также форма треугольника, поэтому мне нужен только фон/цвет треугольника.

Для этого мне нужен линейный градиент в другом линейном градиенте (например, в градиентном массиве).

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

Пожалуйста, ознакомьтесь с разделом Как задавать вопросы и пройдите экскурсию, а затем измените заголовок, чтобы задать четкий и конкретный вопрос.

— 28.02.2024 20:49

javascript css css-calc css-gradients

28.02.2024 17:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Термин linear-gradient не должен появляться дважды в стоимости вашей недвижимости. Здесь вы эффективно вкладываете градиенты. Уберите вторую вместе с лишней закрывающей скобкой.

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

28.02.2024 20:50

Ответ принят как подходящий

Поскольку ваш треугольник должен быть равносторонним, его height будет h = (a√3)/2.
Или здесь мы можем использовать h = 0.866a.

И вместо linear-gradient я бы использовал 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%);
}