Overlapping triangle div inside a flex container - css

Question

I'm trying to create a simple diagonally splitted header using flex container and triangle divs like this:
But for some reason it's not working.
Here is a simplified working example:
function myFunction() {
var e1 = document.getElementById("1");
var e2 = document.getElementById("2");
var els = document.getElementsByClassName("el");
for (let el of els)
el.classList.toggle("active");
e1.classList.toggle("active");
e2.classList.toggle("active");
}
button{
width: 40px;
height: 40px;
}
*{
transition: all 0.3s ease-in-out;
}
body{
background-color: #454545;
}
.el{
width: 50px;
height: 50px;
background-color: blue;
}
.el:nth-of-type(1){
background-color: red;
}
.el.active{
background-color: #454545;
}
.flex{
margin-top: 50px;
margin-left: 50px;
display: flex;
}
.triangle {
position: absolute;
width: 0;
height: 0;
margin-left: 30px;
border-style: solid;
border-width: 50px 30px 0 0;
border-color: red transparent transparent transparent;
}
.reversed-triangle {
position: absolute;
width: 0;
height: 0;
margin-left: 30px;
border-style: solid;
border-width: 0 0 50px 30px;
border-color: transparent transparent blue transparent;
}
.triangle.active{
border-color: #454545 transparent transparent transparent;
}
.reversed-triangle.active{
border-color: transparent transparent #454545 transparent;
}
<button onClick="myFunction()"> Click!
</button>
<div class="flex">
<div class="el active"> </div>
<div class="triangle active" id="1" > </div>
<div class="reversed-triangle" id="2"> </div>
<div class="el"> </div>
</div>
It works perfectly in jsfiddle but the same layout doesn't work in my project.
I'm using react and plain css, this is where it doesn't work:
I can't get both elements to work correctly. As you see, in the image above the right-hand h3 element (Things I've done) overlaps the dark triangle on the left.
If i add z-index: 1 to the overlapped triangle, the opposite triangle will be overlapped when i click the other element like so:
Here you can find the complete code (obv it doens't compile in jsfiddle).
If i forgot to mention something please let me know.
Thank you very much for your time!

Answer 1

Simple example using flex and :before to re-create your image.
body {
background-color: #565656;
}
.wrapper {
width: 400px;
margin: auto;
}
.full-width {
background-color: #565656;
border: solid #fff 1px;
}
.button {
min-height: 80px;
width: 100%;
margin: 0 auto;
display: flex;
}
.button-left {
background-color: #fff;
min-height: 80px;
width: 38%;
position: relative;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
z-index: 1001;
}
.button-right {
width: 62%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1.7em;
font-size: 1.5em;
color: #fff;
}
.button-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid white;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 80px solid transparent;
position: absolute;
top: 0;
right: -80px;
}
<div class="wrapper">
<div class="full-width">
<div class="button">
<div class="button-left">
<p>Me</p>
</div>
<div class="button-right">
Things I've done
</div>
</div>
</div>
</div>