Invert colored text related background - html

Question

I want to invert text color based on the background of the text, like in this image: .
So I've tried the following code, but it didn't work:
#warp,
#text,
#tri {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
z-index: 1;
}
#warp {
background-color: orange;
}
#text {
text-align: center;
z-index: 3;
}
#text h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
}
#tri {
background-color: black;
clip-path: polygon(0 0, 0 100%, 99.8% 150px);
-webkit-clip-path: polygon(0 0, 0 100%, 99.8% 150px);
z-index: 2;
}
<div id="warp">
<div id="text">
<h1>TEXT</h1>
</div>
<div id="tri"></div>
</div>
I found some results about background-image & inverted text, but I don't know how to do it with DIVs.

Answer 1

You can avoid clip-path by using linear-gradient as background and the mix-blend-mode will work perfectly:
#text {
width: 150px;
height: 150px;
z-index: 1;
}
#text {
text-align: center;
background: linear-gradient(to top right, black 50%, orange 51%);
}
#text h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
color: #fff;
}
<div id="text">
<h1>TEXT</h1>
</div>

Answer 2

If you just add the same text to the tri layer, it works:
Edit: In order to allow selecting the text, I've added another transparent layer that wraps all the text as one unit. It does, however, makes updates more repetitive. As a solution, I've added the attached JavaScript code (which isn't necessary).
var text = "TEXT";
var textElements = document.getElementsByTagName("h1");
for (var i=0; i<textElements.length; i++) {
textElements[i].innerHTML = text;
}
#warp,
#text,
#tri,
#selectable {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
#warp {
background-color: orange;
}
#text {
text-align: center;
z-index: 1;
}
h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
}
#tri {
background-color: black;
clip-path: polygon(0 0, 0 100%, 99.8% 150px);
-webkit-clip-path: polygon(0 0, 0 100%, 99.8% 150px);
z-index: 2;
color: blue;
text-align: center;
}
#selectable {
text-align: center;
z-index: 5;
color: transparent;
}
<div id="warp">
<div id="text">
<h1>TEXT</h1>
</div>
<div id="tri">
<h1>TEXT</h1>
</div>
<div id="selectable">
<h1>TEXT</h1>
</div>
</div>