求助：如何用CSS实现全屏响应式三色三角形布局？

你的问题核心在于两点：一是未给三角形元素设置尺寸，导致元素无法显示；二是布局方式未适配全屏宽度，clip-path路径也需要调整以匹配目标效果。以下是完整的实现方案：

1. 基础样式重置 #

先重置全局样式，消除默认边距并统一尺寸计算规则：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

2. 布局容器与三角形样式 #

使用flex布局让三个三角形均分全屏宽度，同时调整clip-path路径以匹配目标设计：

.triangle-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.leftTriangle {
  flex: 1;
  clip-path: polygon(0 0, 0 100%, 100% 0);
  background-color: blue;
}

.centerTriangle {
  flex: 1;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background-color: red;
}

.rightTriangle {
  flex: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background-color: green;
}

3. HTML结构 #

将三个三角形元素放入布局容器中：

<div class="triangle-container">
  <div class="leftTriangle"></div>
  <div class="centerTriangle"></div>
  <div class="rightTriangle"></div>
</div>

关键说明 #

• flex:1让三个三角形自动均分全屏宽度，无需手动设置固定宽度，天然适配不同屏幕尺寸；
• 调整后的clip-path路径确保三个三角形能组合成目标布局；
• 设置html、body及容器的宽高为100%，保证布局完全覆盖视口。

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