如何使用线性渐变根据父级中的位置设置子 div 背景颜色

Question

我正在尝试根据传入的分数道具制作一个水平 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移动，我希望它一直继承其父母的颜色，一直到最右边的绿色。

任何指导将不胜感激。

Answer 1

我只是在这里提到 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>