Overlapping triangle div inside a flex container-CodePudding

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 >
  <div > </div>
  <div  id="1" > </div>
  <div  id="2"> </div>
  <div > </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!

CodePudding user response：

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 >
  <div >
    <div >
      <div >
        <p>Me</p>
      </div>
      <div >
        Things I've done
      </div>
    </div>
  </div>
</div>