多色三角形背景CSS实现咨询：如何优化现有代码达成预期效果

嗨，不用太在意板块的问题，欢迎加入社区！😊

你现在的代码遇到的核心问题是：每个盒子的:before伪元素是绝对定位在右侧，但三个盒子在flex容器里并排排列时，三角形部分要么超出容器范围，要么和后面的盒子重叠，没法形成连续的衔接效果。下面我给你两种实用的解决方案，你可以根据需求选择：

方案一：基于原有代码调整定位与margin #

这个方案在你现有代码的基础上修改，通过负margin让后面的盒子向左移动，同时调整z-index确保三角形显示层级正确：

#wrapper { 
  display:flex; 
  overflow: hidden; /* 可选，隐藏容器外的多余部分 */
}
#triangle-multicolor-box1 { 
  width: 150px; 
  height: 100px; 
  position: relative; 
  background: #007f9f; 
  z-index: 3; /* 最高层级，保证三角形在最上层 */
}
#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; 
  margin-left: -50px; /* 向左移动50px，精准衔接前一个盒子的三角形 */
  z-index: 2; 
}
#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; 
  margin-left: -50px; 
  z-index: 1; 
}
/* 如果最后一个盒子不需要右侧三角形，可以直接删除这段:before代码 */
#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; 
}

HTML代码保持不变即可。修改后，负margin让盒子向左移动50px，刚好和前一个的三角形衔接，z-index则保证前一个盒子的三角形不会被后面的盒子覆盖。

方案二：用clip-path实现更简洁的形状 #

如果想让代码更简洁易维护，可以使用CSS的clip-path属性直接定义盒子形状，不需要伪元素：

#wrapper { 
  display:flex; 
}
.triangle-box {
  width: 200px; /* 包含150px矩形 + 50px三角形的总宽度 */
  height: 100px;
}
.box1 {
  background: #007f9f;
  /* 通过多边形坐标定义带三角形的形状 */
  clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%);
}
.box2 {
  background: #0298bb;
  clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%);
  margin-left: -50px; /* 向左移动衔接前一个盒子 */
}
.box3 {
  background: #01acd7;
  /* 如果最后一个盒子不需要右侧三角形，改用矩形路径：polygon(0 0, 100% 0, 100% 100%, 0 100%) */
  clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%);
  margin-left: -50px;
}

对应的HTML代码可以简化为类名复用：

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

clip-path的polygon()函数通过坐标点定义形状，calc(100% - 50px) 50%就是三角形的顶点位置，这种写法更直观，也更容易修改形状参数。

如果需要兼容老旧浏览器，方案一更稳妥；如果追求现代简洁的代码风格，方案二会更合适。

内容的提问来源于stack exchange，提问作者Paweł Jagodziński