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

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>

斯菲德尔

Answer 1

你可以尝试使用CSS变量

在 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 elem 中的变量时，它也会更改箭头内的颜色。(如果我没记错的话，您也可以通过 js 访问该变量(

Answer 2

你已经把它放在"统计上"了：

.arrowup:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0px 8px 7px;
    border-color: #FFFFFF transparent; /* set it to yellow instead white */
    display: block;
    width: 0;
    z-index: 1;
    top: 8px;
}

你必须明确地说出来。否则你不会得到三角形，我猜你会得到矩形。

Answer 3

你的问题是白色不是背景，而是你拥有的边框。

所以你需要一些使用一些jQuery/JS来做到这一点。

这样做是从.backgr中提取颜色，然后添加新的 css 规则以使用该颜色.arrowup:after。

document.styleSheets[0].addRule('.arrowup:after', 'border-color: ' + $(".backgr").css('backgroundColor') + ' transparent!important;');

.arrowup:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0px 8px 7px;
  border-color: #FFF 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="backgr">
  <div class="arrowup"></div>
</div>

Answer 4

        .arrowup:after {
    content: '^';
    position: absolute;
    display: block;
    font-size: 20px;
    font-weight: bold;
    width: 20px;
    z-index: 1;
    left: 50%;
    height: 13px;
    top: 8px;
    transform: scale(2,1);
}
       
        .backgr{
          width:100px;
          height:100px;
          background-color:yellow;
          position:relative;
        }

    <div class="backgr">
       <div class="arrowup"></div>
    </div>

我试过这个，如果只有箭头是你想要的。