我如何讓“before”三角形繼承正方形的顏色？顏色:繼承，邊框顏色:繼承，背景顏色:繼承無效。

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

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

你可以使用這樣的東西，它需要一個額外的元素，因為你必須重新設置文本的顏色。

JSfiddle演示

文本顏色是繼承的，它有自己的變量名currentColor，可以用在子元素(和偽元素)上。

因此，我們向div添加一個內部span，并向div應用一組文本顏色。

我們必須重置span的顏色(否則它將是不可見的),并通過引用當前顏色來引用背景和邊框。

.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>