html - :after中的CSS3箭头继承父颜色

Question

我试图在 :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>

jsfiddle

Answer 1

您可以尝试使用 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 访问变量)