三角形多色背景 css

Question

我是新来的所以如果我添加错误 post 那么抱歉。我在设计以三角形结尾的彩色背景时遇到问题。下面我粘贴我设法创建的内容。在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>

Answer 2

已回答，但如果您想找到其他方法，请参阅信息

2 种其他可能性：

linear-gradient 偶尔有用:

#wrapper {
  display: flex;
  margin: 1em;
  width: max-content;
  /*shrink to content */
  background: linear-gradient( 45deg, #007f9f 30%, #0298bb 30%, #0298bb 60%, #01acd7 60%, #01acd7 89.5%, #0000 90%) 0 0 / 100% 50% no-repeat, linear-gradient( 135deg, #007f9f 30%, #0298bb 30%, #0298bb 60%, #01acd7 60%, #01acd7 89.5%, #0000 90%) 0 100% / 100% 50% no-repeat;
}

#wrapper:hover {
  filter: drop-shadow( 0px 0px 3px #000)
}

div div {
  display: flex;
  align-items: center;
  width: 150px;
  height: 100px;
}

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

clip-path

#wrapper {
  display: flex;
  margin: 1em;
}

#wrapper:hover {/* for infos*/
  filter: drop-shadow( 0px 0px 3px #000)
}

#wrapper>div {
  padding-left: 50px;
  margin-left: -50px;
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

body>div {}

div div {
  display: flex;
  align-items: center;
}

#wrapper>#triangle-multicolor-box1 {
  padding: 0;
  width: 150px;
  height: 100px;
  position: relative;
  margin: 0;
  background: #007f9f;
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%, 0% 0%);
}

#triangle-multicolor-box2 {
  width: 150px;
  height: 100px;
  position: relative;
  background: #0298bb;
}

#triangle-multicolor-box3 {
  width: 150px;
  height: 100px;
  position: relative;
  background: #01acd7;
}

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

三角形多色背景 css

Triangle multicolor background css

css

background