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

【问题标题】：Before not inheriting color from parent element在不从父元素继承颜色之前
【发布时间】：2014-09-30 14:14:07
【问题描述】：

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

【问题讨论】：

边框颜色不是可继承的属性，你只需要在伪元素上定义它们。糟透了......但它必须完成。
如果用户输入一些颜色代码，通过变量应用到 HTML 中怎么办？如
Price
，那我该如何选择伪元素呢？
我假设您的意思不是color，而是border-color。目前尚不清楚您要做什么。
不知道应该是颜色、边框颜色还是背景颜色。只是想展示如何使用变量（以及为什么 :before 需要继承它）
伪元素不能继承边框颜色，在这种情况下它不是可继承的属性。如果您需要一些自动系统，您可以使用 Javascript 来更改 CSS。

标签： html css inheritance pseudo-element

【解决方案1】：

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

JSfiddle Demo

文本颜色是继承的，并有自己的变量名currentColor，可用于子元素（和伪元素）。

所以我们在 div 中添加一个内部 span 并为 div 应用设置的文本颜色。

我们必须重置 span 的颜色（否则它将不可见）并通过引用 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>

【讨论】：