如何使用线性渐变基于父级中的位置设置子级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>
    );
};

CSS：

.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;
}

定位很好。

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

换句话说：如果得分为1，则垂直div将位于父元素的左侧，但我也希望它继承红色，并且随着得分的增加，垂直div越过水平div，我希望它一直继承其父母的颜色，直到最右边将变为绿色。

任何指导将不胜感激。

解决方法

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

.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: 100%;
    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;
}
.value{
    position: absolute;
    width: 10%;
    text-align: center;
}

        <div class="ScoreBar">
            <div class="Scorebar-Horizontal">
                <div class="Scorebar-Vertical" style="clip-path: polygon(50% 0,60% 0,60% 100%,50% 100%);">
                    <span class="value" style="left:50%">60</span>
                </div>
            </div>
        </div>