Одинаковый цвет фона, разная ширина градиента

Question

Я пытаюсь получить цвет фона для некоторых td с, чтобы он выглядел аналогично фону индикатора выполнения: слева направо где-то посередине, он цветной, а после этого процента - белый,И если он равен 100%, то, конечно, все td окрашено.

Цвет a linear-gradient одинаков для всех td с, но длина будет отличаться.У меня есть только 3 длины:

• 30%
• 70%
• 100%
• Также 0%, но тогда оно пустое, поэтомуоб этом не может быть и речи

Для этого я использую определенный класс для каждого варианта, .progress_**.Каждый класс имеет два linear-gradient s в свойстве background.Это мой текущий рабочий CSS:

.progress_30 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 1) 30%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}
.progress_70 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 1) 70%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}
.progress_100 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 100%,
            rgba(255, 255, 255, 1) 100%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}

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

Итак, я попробовал это:

.progress {
    background: linear-gradient(to right, yellow, green);
}
.progress_30 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 1) 30%
        )
    ;
}
.progress_70 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 1) 70%
        )
    ;
}
.progress_100 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 100%,
            rgba(255, 255, 255, 1) 100%
        )
    ;
}

Это не полностью работает: белая часть справа - правильная длина.Но слева я не вижу linear-gradient, только фоновый цвет страницы (не белый).

Есть ли способ получить как можно меньше повторений в CSS, впо крайней мере, цвет linear-gradient устанавливается только один раз, или я должен сделать это, как в моем первом примере?

Answer 1

Вы можете положиться на background-size и сохранить объявление градиента в одном классе:

div {
  min-height: 50px;
}

.progress {
  background: 
   linear-gradient(#fff, #fff) right no-repeat, 
   linear-gradient(to right, yellow, green);
}

.progress_30 {
  background-size: 70% 100%, auto;
}

.progress_70 {
  background-size: 30% 100%, auto;
}

.progress_100 {
  background-size: 0% 100%, auto;
}

<div class="progress progress_30"></div>
<div class="progress progress_70"></div>
<div class="progress progress_100"></div>

Вы можете упростить использование CSS-переменной, если хотите учесть больше процентных значений:

div {
  min-height: 50px;
}

.progress {
  background: 
   linear-gradient(#fff, #fff) right/calc(100% - var(--p,50%)) 100% no-repeat, 
   linear-gradient(to right, yellow, green);
}

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

<div class="progress" ></div>