Before not inheriting color from parent element

Question

How do I make the 'before' triangle inherit the color from the square? Color:inherit, border-color:inherit, background-color:inherit didn't work out.

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;
    }

Fiddle: http://jsfiddle.net/vkw281gL/

Answer 1

You could use something like this which requires an extra element as you have to reset the color of the text.

JSfiddle Demo

Text color is inherited and has it's own variable name currentColor which can be used on child elements (and pseudo- elements).

So we add an internal span to the div and apply a set text color to the div.

We have to reset the color for the span (otherwise it would be invisible) and refer to the background and borders by reference to the 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>