Javascript 如何基于线性渐变在父对象中的位置设置子div背景色

我试着根据传来的记分道具制作一个水平div和一个垂直div

组成部分：

const ScoreBar = ({ score }) => {
    const left = `${score * 10 - 10}%`;

    return (
        <div className="ScoreBar">
            <div className="Scorebar-Horizontal">
                <div className="Scorebar-Vertical" style={{ left: left }}>
                    {score}
                </div>
            </div>
        </div>
    );
};

定位工作正常

但是，我希望垂直div根据其相对于其父对象的位置继承其父对象的渐变颜色

换句话说：如果分数为1，垂直div将位于父元素的左侧，但我也希望它继承红色，并且随着分数的增加，垂直div在水平div上移动，我希望它继承父元素的颜色，一直到最右边，它将是绿色

---

任何指导都将不胜感激。

我只是在这里提到HTML和CSS。使用这些内联CSS，您可以控制您的需求。请询问是否需要任何澄清

.ScoreBar{
宽度：250px；
高度：150像素；
保证金：0自动；
背景色：rgb（243239239）；
边界半径：4px；
位置：相对位置；
填充：10px 20px 10px 20px；
显示器：flex；
弯曲方向：柱反向；
}
.记分栏.记分栏水平{
位置：相对位置；
宽度：100%；
身高：25%；
背景：线性梯度（90度，红色，黄色，绿色）；
边界半径：3px；
}
.记分栏.记分栏垂直{
宽度：100%；
高度：120px；
位置：绝对位置；
底部：0px；
背景：继承；
不透明度：1；
边界半径：3px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：20px；
字号：700；
颜色：黑色；
}
.价值{
位置：绝对位置；
宽度：10%；
文本对齐：居中；
}

60

.ScoreBar {
    width: 250px;
    height: 150px;
    margin: 0 auto;
    background-color: rgb(243, 239, 239);
    border-radius: 4px;
    position: relative;
    padding: 10px 20px 10px 20px;
    display: flex;
    flex-direction: column-reverse;
}

.ScoreBar .Scorebar-Horizontal {
    position: relative;
    width: 100%;
    height: 25%;
    background: linear-gradient(90deg, red, yellow, green);
    border-radius: 3px;
}

.ScoreBar .Scorebar-Vertical {
    width: 10%;
    height: 120px;
    position: absolute;
    bottom: 0px;
    background: inherit;
    opacity: 1;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: black;
}