如何用HTML/CSS实现三色对角线分割的正方形？

你当前的代码问题在于三个border形状都定位在左上角，彼此完全重叠，所以无法呈现出三个分区的效果。下面提供两种简洁的实现方案：

方案一：使用CSS线性渐变（推荐） #

这种方法无需额外DOM元素，仅通过多层线性渐变即可实现目标效果：

.diagonal-box {
  width: 200px;
  height: 200px;
  background: 
    linear-gradient(135deg, #7CFC00 0%, #7CFC00 50%, transparent 50%),
    linear-gradient(-135deg, #00BFFF 0%, #00BFFF 50%, transparent 50%),
    #FF7F50;
}

<div class="diagonal-box"></div>

原理说明：

• 第一个渐变从左上角延伸至右下角，覆盖正方形左上50%的区域（绿色）
• 第二个渐变从右上角延伸至左下角，覆盖正方形右上50%的区域（蓝色）
• 最后一层背景色填充剩余的底部区域（橙色），正好形成三色对角分割的布局

方案二：调整border元素的定位与层级 #

如果想继续使用border的方式实现，需要调整每个三角形的位置和堆叠顺序，避免重叠：

.diagonal-box {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

/* 左下橙色三角形 */
.diagonal-box:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 200px 200px;
  border-color: transparent transparent #FF7F50 transparent;
  z-index: 1;
}

/* 右上蓝色三角形 */
.diagonal-box:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 200px 200px 0;
  border-color: transparent #00BFFF transparent transparent;
  z-index: 2;
}

/* 左上绿色三角形 */
.diagonal-box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #7CFC00 transparent transparent transparent;
  z-index: 3;
}

<div class="diagonal-box">
  <div></div>
</div>

调整点说明：

• 将:before定位到左下角，:after定位到右上角，避免和内部div的左上三角形重叠
• 通过z-index控制堆叠顺序，确保三个三角形都能正确显示

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