如何用CSS创建多重叠三角形构成的元素？

你不需要用重叠三角形来实现，用**CSS线性渐变（linear-gradient）**就能精准还原这个倾斜彩色条纹效果，而且代码更简洁：

实现步骤 #

1. 准备一个基础HTML容器：

<div class="color-stripe"></div>

2. 编写CSS样式，通过线性渐变的角度和颜色断点控制每个彩色区块：

.color-stripe {
  /* 调整容器尺寸到你需要的大小 */
  width: 400px;
  height: 200px;
  /* 设置渐变角度为135度（对应图中的倾斜方向），依次定义每个颜色的起止范围 */
  background: linear-gradient(
    135deg,
    #ff4757 0%, #ff4757 20%,
    #ffa502 20%, #ffa502 40%,
    #2ed573 40%, #2ed573 60%,
    #1e90ff 60%, #1e90ff 80%,
    #3742fa 80%, #3742fa 100%
  );
  /* 可选：添加圆角等样式优化视觉 */
  border-radius: 4px;
}

关键说明 #

• 你之前用三角形叠加得到实心矩形，是因为用border生成的三角形难以精准控制位置和范围，叠加后容易填满容器；而线性渐变可以直接在单个元素上划分出不同颜色的倾斜区块，无需多元素叠加。
• 调整135deg可以改变条纹的倾斜方向，比如45deg是反向斜纹；修改百分比数值可以调整每个彩色区块的宽度；替换颜色值就能匹配你需要的色彩方案。

内容的提问来源于stack exchange，提问作者Janet Webster