Triangle multicolor background css

Question

I'm new here so if I added the wrong post then sorry. I have a problem with styling a multicolored background that ends with a triangle. Below I am pasting what I managed to create. How to write it correctly in CSS? I am enclosing a graphic of how it should look like.

#wrapper {
  display:flex;
}    
#triangle-multicolor-box1 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #007f9f;
    }
#triangle-multicolor-box1:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #007f9f;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
    }

#triangle-multicolor-box2 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #0298bb;
    }
#triangle-multicolor-box2:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #0298bb;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
    }
#triangle-multicolor-box3 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #01acd7;
    }
#triangle-multicolor-box3:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #01acd7;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
    }
  
  

<div id="wrapper">
  <div id="triangle-multicolor-box1"></div>
  <div id="triangle-multicolor-box2"></div>
  <div id="triangle-multicolor-box3"></div>
</div>

Triangle multicolor background

Answer 1

The trick here is z-index for the correct position of each element see example:

#wrapper {

  display:flex;
}    
#triangle-multicolor-box1 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #007f9f;
    }
#triangle-multicolor-box1:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #007f9f;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      z-index:2;
    }

#triangle-multicolor-box2 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #0298bb;
    }
#triangle-multicolor-box2:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #0298bb;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      z-index:1;
    }
#triangle-multicolor-box3 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #01acd7;
    }

<div id="wrapper">
  <div id="triangle-multicolor-box1"></div>
  <div id="triangle-multicolor-box2"></div>
  <div id="triangle-multicolor-box3"></div>
</div>