如何解决如何使用线性渐变基于父级中的位置设置子级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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。