如何仅显示背景图像的一部分：线性渐变？

Question

我很好奇还没有人问过这个问题：

我正在创建一个进度条作为反应组件。 我想用线性渐变填充这个进度条。 但我也想只显示该背景颜色的完整百分比。

我没有找到解决方法。 这是我的 CSS 代码：

.ProgressBarContainer{
    height: 24px;
    width: 250px;
    background-color: lightgray;
}

.ProgressBarGradient{
    height: 24px;
    width: 75%;
    background-image: linear-gradient(to right, #a83e4c , #489668);
}

.ProgressBarFiller{
    height: 24px;
    width: 75%;
}

这是JS：

const ProgressBar = (props)=>{
    return(
        <div className={classes.ProgressBarContainer}>
            <div className={classes.ProgressBarGradient}>
                <div className={classes.ProgressBarFiller}></div>
            </div>
        </div>
    )
}

这是目前显示的内容

事实上，我只想在宽度小于 20% 时显示红色，并且只有在接近 100% 时才显示绿色..

Answer 1

感谢评论，解决方案是使用第 3 个 div 隐藏第 2 个 div 的一部分。

.GradientHider{
    height: 24px;
    margin-left:50%;
    background-color: lightgray;
}

我意识到第一个 div 没用..