css - 三 Angular 形多色背景 css

Question

我是新来的所以如果我添加了错误的帖子那么抱歉。我在设计以三 Angular 形结尾的彩色背景时遇到问题。下面我粘贴我设法创建的内容。如何在 CSS 中正确书写？我附上了它应该是什么样子的图形。

#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

这里的技巧是z-index，用于每个元素的正确位置，参见示例:

#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>