CODEWITHSUNDEEP
htmlcssinheritancepseudo-element
user43132
user43132

Reputation: 137

Before not inheriting color from parent element

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.

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

Upvotes: 5

Views: 4473

Answers (1)

Paulie_D
Paulie_D

Reputation: 115096

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>

Upvotes: 7

Related Questions