Html 如何为“创建仅CSS的进度条”；还剩几天？”；

我正试图做一些或多或少类似的事情

下面是我最好的尝试，但我对结果不满意，因为低值的颜色渐变有太多的红色

。进度{
高度：5px；
}
.进度条{
背景：-webkit线性梯度（左，绿色0%，红色100%）；
}

还剩20天（30天试用期）

下面是使用渐变和CSS变量的另一个想法：

。进度{
宽度：200px；
高度：10px；
保证金：5px；
背景：
线性梯度（var（--c，红色），var（--c，红色））右侧/var（--p，50%）100%无重复，
#ccc；
}

---

下面是使用渐变和CSS变量的另一个想法：

。进度{
宽度：200px；
高度：10px；
保证金：5px；
背景：
线性梯度（var（--c，红色），var（--c，红色））右侧/var（--p，50%）100%无重复，
#ccc；
}