Как остановить повторяющийся линейный градиент в CSS?

Question

Чтобы добавить в CSS, это можно сделать с помощью следующего кода. Это создаст красивый div-элемент с горизонтальными полосами.

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

Возможное решение - использовать linear-gradientвместо этого и жестко запрограммируйте все необходимые полосы. Но, учитывая довольно большой объем кода, который вам придется написать для этого решения, это нежелательно.

Другие поиски в Интернете не рассматривали, как это можно сделать для этого конкретного варианта использования. Например, с помощью документации MDN можно узнать, как repeating-linear-gradientработает. Но поскольку он не дает примера для этой ситуации, я не знаю наилучшего подхода к этой проблеме.

Answer 1

Определите размер градиента и отключите повторение:

Answer 2

После некоторой игры я пришел к следующему решению, где я ввел поверх repeating-linear-gradient, создавая иллюзию, что градиент остановился. Это работает, если первая часть этого linear-gradient быть полностью прозрачным, установив последнее значение rgba к 0.0.

Вдохновение для этого ответа пришло из этого другого вопроса о стеке, и я изменил код для этой конкретной цели.