I have created a ‘block’ for a webpage that for example is called ‘test-div’.
Test div also has an extra class added to it to change its background color ie.
test-div test-div-bg-bright-gold
test-div test-div-bg-dark-blue
etc.
My test-div also has a pseudo class before to cut the top-left border and I need the colour of this to match whatever the bg class is that’s applied. The before CSS looks like this –
test-div::before {
content: '';
position: absolute;
top: 0; left: 0;
border-top: 100px solid white;
border-right: 100px solid var(--COLORTOMATCHTHEBGCLASSGOESHERE?);
width: 0;
}
I’ve been trying to figure out how I can do this for ages, so any help would be greatly appreciated.
Thanks!
2
Answers
You can set the
var
value inside of the color modification class. That way the variable can be applied to thebackground-color
of the div and theborder
of thepseudo
element.CSS custom properties (aka variables) are inherited properties, so you can do it like this:
When you override the value of the custom property, it’ll get inherited by its children (including pseudoelements).