本文介绍如何使用现代 css 的 `clip-path` 属性，精准构建一个覆盖全屏、四色三角形在视口中心交汇的响应式布局，替代易出错的 border 技巧，实现简洁、可维护且语义清晰的视觉结构。
要将网页完整分割为四个等腰直角三角形（上、左、下、右），且所有三角形顶点精确汇聚于视口正中心（50% 50%），最稳健、语义清晰且易于调试的方式是采用 clip-path: polygon()。相比依赖 border 绘制三角形的传统方案（易受盒模型、缩放、响应式断点干扰），clip-path 直接基于坐标裁剪元素形状，逻辑直观、控制精准。
✅ 核心实现原理
每个 .triangle 元素均设为 100vw × 100vh 全屏尺寸，并通过 clip-path 定义其可见区域：
- 顶部三角形：连接左上角 (0 0) → 右上角 (100% 0) → 中心点 (50% 50%)
- 左侧三角形：(0 0) → 左下角 (0 100%) → (50% 50%)
- 底部三角形：(0 100%) → 右下角 (100% 100%) → (50% 50%)
- 右侧三角形：(100% 0) → (100% 100%) → (50% 50%)
所有三角形层叠于同一容器内，z-index 可省略（默认文档流顺序已满足视觉需求），且无重叠间隙——因每个 polygon 均严格共享中心顶点与相邻边。
? 完整代码示例
四三角全屏布局
⚠️ 注意事项与最佳实践
- 浏览器兼容性：clip-path 的 polygon() 在 Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+ 中原生支持；如需支持旧版 Safari（Clippy 生成兼容代码。
- 避免滚动干扰：务必设置 body { overflow: hidden }，防止移动端地址栏缩放导致 100vh 计算偏差；推荐在移动端使用 100dvh（动态视口高度）提升鲁棒性。
- 无障碍提示：此布局纯属视觉装饰，若三角形区域需承载交互内容（如按钮、链接），请确保为每个 .triangle 添加 aria-hidden="true"，并将实际可操作元素置于独立、语义化的 DOM 节点中。
- 性能优化：clip-path 是 GPU 加速属性，动画性能优于 transform + overflow:hidden 组合；如需动态旋转/缩放三角形，直接对 .triangle 应用 transform 即可。
该方案彻底规避了 border 技巧中因 vw/vh 单位与 transform 交互相位导致的像素级错位问题，代码精简、逻辑透明，是构建现代几何化网页布局的首选方法。
立即学习“前端免费学习笔记（深入）”；
