我试图在 :after
行中获得相同的背景颜色箭头,但我似乎无法弄清楚如何让它工作。我需要纯 CSS3。
这是我的 CSS3:
.arrowup:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 8px 7px;
border-color: "I WANT THE YELLOW HERE NON STATICALY" transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
}
.arrowup:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 8px 7px;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 1;
top: 7px;
}
.backgr{
width:100px;
height:100px;
background-color:yellow;
}
如此处所示,背景颜色为黄色,我希望 :after
的边框颜色中的白色包含背景的黄色,而不是将其静态放置在那里。
HTML:
<div class="backgr">
<div class="arrowup"></div>
</div>
最佳答案
您可以尝试使用 css variables
在 backgr 元素中声明颜色:
backgr{
//your other stuff...
--bg-color: yellow;
background-color: var(--bg-color); //added for clarity
}
然后在箭头的边框属性中将其与 var(--bg-color) 一起使用:
arrowup:after{
//your other stuff
border-color: var(--bg-color) transparent;
}
现在,当您更改 backgr 元素中的变量时,它也会更改箭头内的颜色。 (如果我没记错的话,你也可以通过 js 访问变量)
关于html - :after中的CSS3箭头继承父颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44050541/