三角形多色背景css

问题描述

我是新来的，所以如果我添加了错误的帖子，那么对不起。我在设计以三角形结尾的彩色背景时遇到问题。在下面，我粘贴了我成功创建的内容。如何在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

解决方法

这里的技巧是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>

,

已经回答，但是如果您想寻找其他方法，请提供信息

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