Как сделать 5 цветов в градиенте?

Question

[hsnz]

Ребята, помогите решить вопрос, задача стоит следующим образом, мне нужно border сделать из 5 цветом с равным отрезком.
Прилагаю пример, но у меня всего 2 цвета в border, как сделать, чтобы было 5 цветов, никак не могу разобраться.

.banner-text {
    border-left: 5px solid #ec4863;
    padding: 15px 40px;
    color: #fff;
    margin-top: 170px;
    border-image: linear-gradient(to bottom, rgb(167,62,82) 20%, rgb(236,72,99) 20%, rgb(255,210,133) 20%, rgb(55,101,116) 20%, rgb(92,40,73) 20%)5 100%;
}

Answer 1

[Ankhena]

Я ш вам даже пример в прошлом ответе делала. Как сделать border в разных цветах в разных отрезках?

Через запятую пишется направление градиента, затем цвет и точка перехода в любых доступных единицах измерения, снова цвет и точка и т.д. Если 2 соседние точки одинакового цвета - получается однотонный кусок, если разного, то плавный переход от одного к другому.

Вся высота блока 100%, надо 5 равных кусков -> по 20%. Чтобы были четкие границы цветов начало и конец цвета должны совпадать или почти совпадать (Зависит от угла наклона градиента, чтобы не было ступенчатой границы делают не совсем стык в стык. Для вашей задачи это не актуально, так лирическое отступление)

Хорошие уроки про градиенты на https://htmlacademy.ru/courses/70 Курс доступен только по подписке, но 90р. не жалко за очень полезные знания. Заодно что-то еще новое узнаете.

Либо статья: https://html5book.ru/css3-gradient/ (последний пример из первой части).

Визуальный генератор градиентов: www.colorzilla.com/gradient-editor

Comments

[Максим]

Анна , ну если к примеру то ваш фокус с 5ти цветным бордером не удался хотя автор его отметил как Решение , но 20% на каждый цвет тоже не получится (наверно)

я видел всяких крутых чуваков они на gradient на хакатонах рисовали Джаконду ... мне просто лень учить было ...

[hsnz]

Спасибо, статья последняя помогла, сделал:

border-image: linear-gradient(to bottom, #a73e5c 20%, #ec4863 20%, #ec4863 40%, #ffd285 40%, #ffd285 60%, #376574 60%, #376574 80%, #5c2849 80%, #5c2849 100% ) 1;

[Ankhena]

Максим Ленский: Почему не удался? Заменой bg на border-image? Это дело вкуса и макета.
И почему не получится по 20%?

[Максим]

Ankhena W: я не про то что .... а про то что проще можно , к примеру так : https://codepen.io/Geyan/pen/BRPjJJ?editors=1100

[Максим]

Ankhena W: или так на чистых градиентах : https://codepen.io/Geyan/pen/zwLrVv?editors=1100

[Ankhena]

Максим Ленский: тоже вариант
я просто против лишних элементов DOM, если их можно избежать.