最简单直接的方式是用 CSS clip-path 配合 repeating-linear-gradient 实现三角形网格，每个三角用 polygon(0 0, 100% 0, 50% 100%) 定义，通过多层渐变控制间距与方向，避免手写多个 div，且浏览器支持成熟。
用 CSS clip-path 生成三角形网格最简单
直接用 clip-path 配合重复的 polygon() 是实现低多边形（low-poly）背景最快的方式，不需要额外图片或 Canvas。浏览器支持已很成熟（Chrome 55+、Firefox 54+、Safari 15.4+），移动端也基本可用。
关键不是“画满整个背景”，而是用多个小三角错位平铺，制造几何碎裂感：
- 每个三角用
clip-path: polygon(0 0, 100% 0, 50% 100%)定义形状 - 用
background-image+repeating-linear-gradient控制间距和方向，避免手写几十个div - 颜色必须手动指定——低多边形的核心是相邻三角色差明显，纯靠渐变会失去“面”的质感
示例：一个 60px × 50px 的斜向三角网格
body {
background: #1a1a2e;
background-image:
clip-path: polygon(0 0, 100% 0, 50% 100%),
linear-gradient(135deg, #4cc9f0 0%, #4cc9f0 50%, transparent 50%),
linear-gradient(-45deg, #4361ee 0%, #4361ee 50%, transparent 50%);
background-size: 60px 50px;
}SVG <pattern> 更可控但需内联或单独文件
如果需要精确控制每个三角顶点、旋转角度或响应式缩放，<pattern> 是更稳妥的选择。它本质是矢量模板，缩放不糊、颜色可 CSS 覆盖，但必须确保 SVG 内联进 HTML 或作为外部资源正确加载。
立即学习“前端免费学习笔记（深入）”；
常见踩坑点：
-
<pattern>默认patternUnits="objectBoundingBox"，想按像素铺要显式设为userSpaceOnUse - 每个
<polygon>的fill值不能用变量，得硬编码或 JS 注入；CSS 自定义属性在 SVG 内部不生效 - Firefox 对嵌套
<pattern>中的transform支持不稳定，避免用rotate()做动态旋转
最小可用 SVG 模式片段（可直接贴进 <svg> 标签内）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<svg width="0" height="0">
<defs>
<pattern id="lowpoly" width="80" height="70" patternUnits="userSpaceOnUse">
<polygon points="0,0 80,0 40,70" fill="#3a0ca3" />
<polygon points="80,0 80,70 40,70" fill="#4cc9f0" />
</pattern>
</defs>
</svg>Canvas 动态生成适合需要随机性或交互的场景
当你要让三角随鼠标移动偏移、点击打散、或每刷新变一套配色时，Canvas 是唯一能实时计算顶点并重绘的方案。但注意：它本质是位图，放大后边缘会模糊，且无法被 CSS filter 统一调色（得在绘制时手动加灰度/色调）。
核心逻辑就三步：
- 用
Math.random()在画布上撒点，再用 Delaunay 三角剖分算法连成不重叠三角（推荐用d3-delaunay库） - 每个三角的
fillStyle别用纯随机色——人眼对蓝紫系更敏感，建议限定 HSL 色相范围（如hsl(${200 + Math.random() * 40}, 70%, 60%)） - 动画帧率超过 60fps 反而浪费，用
requestAnimationFrame控制重绘节奏，静止时停掉
不推荐从零手写 Delaunay；npm 上 d3-delaunay 的 from(points) 方法一行就能生成三角索引数组。
别忽略性能和语义代价
低多边形背景看着轻量，实际容易拖慢渲染：CSS clip-path 在旧版 Safari 上触发强制重排，SVG <pattern> 过多节点会让首屏解析变慢，Canvas 高频重绘吃 GPU。
上线前务必检查这几项：
- 用 Chrome DevTools 的
Rendering > FPS Meter看滚动是否掉帧 - 禁用 JavaScript 后，SVG 或 CSS 方案是否仍能显示基础色块（避免纯 Canvas 导致无内容）
- 色值别全用亮色——深底色上三角若都选
#ffffff或#ff0000，可访问性对比度会低于 3:1，WCAG 不通过
最省事的折中方案：用 CSS 生成骨架，再用 @media (prefers-reduced-motion: reduce) 关闭所有动态效果。
