在不从父元素继承颜色之前

Question

如何让'before'三角形继承正方形的颜色？Color:inherit,border-color:inherit,background-color:inherit没有发挥出来.

HTML:

<div class="tag">
   16,00 €
</div>

CSS:

.tag{
    position:absolute;
    top:20px;
    left:150px;
    display:block;

    width:290px;
    height:100px;
    background-color: orange;
    border-color: orange;

}       
.tag:before{
        color:orange;
        content:"";
        position:absolute;
        left:-50px;
        border-top: 50px solid transparent;
        border-right: 50px solid;
        border-bottom: 50px solid transparent;
    }

小提琴:http://jsfiddle.net/vkw281gL/

Answer 1

你可以使用这样的东西,这需要一个额外的元素,因为你必须重置文本的颜色.

JSfiddle演示

文本颜色是继承的,并且具有自己的变量名称currentColor,可以在子元素(和伪元素)上使用.

因此我们span在div中添加一个内部并将一组文本颜色应用于div.

我们必须重置跨度的颜色(否则它将是不可见的)并通过引用来引用背景和边框currentColor.

	.tag {
	    position:absolute;
	    top:20px;
	    left:150px;
	    display:block;
	    color:green;
	    width:290px;
	    height:100px;
	    background-color: currentColor
	}
	span {
	    color:black;
	}
	.tag:before {
	    content:"";
	    position:absolute;
	    left:-50px;
	    border-top: 50px solid transparent;
	    border-right: 50px solid currentColor;
	    border-bottom: 50px solid transparent;
	}

<div class="tag"> 
    <span>16,00 €</span>
</div>