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

【问题标题】：How to set child div background color based on position in parent with a linear gradient如何使用线性渐变根据父级中的位置设置子级div背景颜色
【发布时间】：2020-12-18 07:30:49
【问题描述】：

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

任何指导将不胜感激。

【问题讨论】：

标签： javascript html css reactjs linear-gradients

【解决方案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>

【讨论】：