HTML怎么做低多边形背景_html低多边形三角背景效果【必看】-html教程-PHP中文网

最简单直接的方式是用 css clip-path 配合 repeating-linear-gradient 实现三角形网格，每个三角用 polygon(0 0, 100% 0, 50% 100%) 定义，通过多层渐变控制间距与方向，避免手写多个 div，且浏览器支持成熟。

html怎么做低多边形背景_html低多边形三角背景效果【必看】

用 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>` 更可控但需内联或单独文件

如果需要精确控制每个三角顶点、旋转角度或响应式缩放，<pattern></pattern> 是更稳妥的选择。它本质是矢量模板，缩放不糊、颜色可 CSS 覆盖，但必须确保 SVG 内联进 HTML 或作为外部资源正确加载。

常见踩坑点：

<pattern></pattern> 默认 patternUnits="objectBoundingBox"，想按像素铺要显式设为 userSpaceOnUse
每个 <polygon></polygon> 的 fill 值不能用变量，得硬编码或 JS 注入；CSS 自定义属性在 SVG 内部不生效
Firefox 对嵌套 <pattern></pattern> 中的 transform 支持不稳定，避免用 rotate() 做动态旋转

最小可用 SVG 模式片段（可直接贴进 <svg></svg> 标签内）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<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><polygon points="80,0 80,70 40,70" fill="#4cc9f0"></polygon></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) 方法一行就能生成三角索引数组。