Двухцветный индикатор линейного градиента завершен только наполовину

Question

У меня проблемы с попыткой получить двухцветный линейный градиент, чтобы остановить его на полпути, не заканчивая вторым цветом.

Поэтому идея состоит в том, чтобы использовать линейный градиент, чтобы показать, сколько полосы пропускания было использовано.У меня есть начальный цвет, и цвет должен представлять 100%Но когда я показываю только 50% с линейным градиентом, отметка 50% - это второй цвет.Это должно быть примерно на полпути между двумя цветами, того же цвета, что было бы на 50%, если использование было на 100%.

Я использую этот код:

background: linear-gradient(-90deg,  #438600, #8fd747);

Но25% и 75% (например) оба будут иметь # 8fd747 на своих соответствующих концах.Мне нужно, чтобы они заканчивались на цвете 25% и 75% (соответственно) между двумя цветами в моем линейном градиенте.

Я не могу себе представить, что это так сложно, но я просто не могу понять это.

Спасибо

РЕДАКТИРОВАТЬ: Вот то, что я ищу с изображениями:

100%:

50%:

25%:

Как вы можете видеть выше, столбцы представляютполный градиент, даже когда не полный.Но в тех, которые меньше 100%, я хочу, чтобы градиент показывал уровень, который был бы градиентом для его определенного процента, как видно из 100%.Я не должен получить более темный цвет, пока он не достигнет 100%.

Answer 1

Вам нужно настроить background-size и использовать несколько фонов, чтобы получить это.Верхним слоем будет один цветовой градиент, который будет покрывать основной градиент и отображать только необходимую его часть:

.progress { 
 height:30px;
 margin:20px;
 background-image: 
  linear-gradient(#ccc,#ccc),
  linear-gradient(to left,  #438600 , #8fd747 );
 background-size:var(--p,50%) 100%,100% 100%;
 background-position:right,left;
 background-repeat:no-repeat;
}

<div class="progress">
</div>
<div class="progress" style="--p:70%">
</div>
<div class="progress" style="--p:30%">
</div>

Или вы можете сделать это с одним градиентом и настроить background-position:

.progress { 
 height:30px;
 margin:20px;
 background-image: 
  linear-gradient(to left,  #438600 , #8fd747 );
  background-size:100% 100%;
 background-position:var(--p,-200px) 0;
 width:400px;
 background-repeat:no-repeat;
 background-color:#ccc;
 
}

<div class="progress">
</div>
<div class="progress" style="--p:-50px;">
</div>
<div class="progress" style="--p:-300px;">
</div>