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

Question

如何让“之前”的三 Angular 形继承正方形的颜色？ 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;
    }

fiddle :http://jsfiddle.net/vkw281gL/

Answer 1

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

JSfiddle Demo

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

因此我们向 div 添加一个内部 span 并将设置的文本颜色应用于 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>