画三角形有三种主流方案：canvas需用beginPath+moveTo+lineTo+closePath并调用stroke/fill；CSS clip-path用polygon裁剪元素，轻量但IE不支持；SVG的最语义化、可交互、缩放无损。
用 canvas 的 beginPath + moveTo + lineTo 画三角形
HTML5 本身没有“画三角形”这个现成 API，得靠 canvas 的路径绘制能力手动连三条线。核心是闭合路径：起点 → A → B → C → 回起点（或用 closePath）。
常见错误是只画了三条线但没调用 stroke 或 fill，结果什么也看不到；或者坐标算错，三角形缩成一个点。
-
beginPath()必须先调，否则可能和之前路径混在一起 - 三个顶点坐标要明确，比如等边三角形建议用数学公式算，别硬凑整数
- 调用
stroke()是描边，fill()是填色，两者可共存，但顺序影响视觉（先 fill 后 stroke 更稳妥） - 示例（画一个底边水平的等腰三角形）：
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100, 50); // 顶点
ctx.lineTo(50, 150); // 左底角
ctx.lineTo(150, 150); // 右底角
ctx.closePath(); // 自动连回 (100, 50)
ctx.stroke(); // 显出边框
用 CSS clip-path 做纯样式三角形
如果只是 UI 上需要一个三角形图标或装饰块，不用 JS、不依赖 canvas，clip-path 是更轻量的选择。它直接裁剪元素的显示区域，本质还是矩形盒子，只是“露出来”的部分是三角形。
容易踩的坑是单位写错（比如漏掉 px 或误用 %），或者坐标系理解偏差：clip-path: polygon(...) 的坐标是相对于元素自身左上角的，不是页面全局。
立即学习“前端免费学习笔记（深入）”；
- 必须给元素设宽高，否则裁剪无效（空盒子没东西可裁）
-
polygon(0% 0%, 50% 100%, 100% 0%)是个常用等腰三角形模板，注意百分比是相对于该元素尺寸 - 若需精确像素控制，改用
px单位，比如polygon(0 0, 50 100, 100 0) - 兼容性注意：IE 全系不支持，Edge 17+ 才开始支持，现代 Chrome/Firefox/Safari 没问题
SVG <polygon></polygon> 是最语义化也最稳的方案
比起 canvas 的命令式绘图和 CSS 的裁剪模拟，SVG 的 <polygon></polygon> 标签天生就是为多边形设计的，属性直观、缩放无损、支持事件绑定，适合需要交互或响应式图形的场景。
典型错误是点坐标写成字符串但格式不对，比如多空格、逗号后少空格，或点数不够三个——浏览器会静默失败，图形不出现。
-
points属性值是一串空格/逗号分隔的x,y对，如"0,0 50,100 100,0" - 不需要闭合：SVG 自动首尾连线，写三个点就构成三角形
- 可直接设
fill和stroke属性，无需额外 CSS - 嵌入 HTML 时注意命名空间，但内联 SVG 不用额外处理
<svg width="200" height="200"> <polygon points="100,20 40,180 160,180" fill="#3498db" stroke="#2980b9" stroke-width="2"/> </svg>
为什么不用 border 技巧？
老办法“用 div 的 border 拼三角形”在 HTML5 场景下基本不推荐了——它依赖 border 渲染的几何巧合，可控性差，无法旋转、缩放易失真，且不能设置圆角或阴影。
比如 border-left: 50px solid transparent 这类写法，一旦父容器有 transform 或 flex 布局干扰，位置就飘；更别说想让它响应鼠标事件时，点击热区和视觉形状严重不一致。
- 仅适用于静态、极简、无交互需求的纯装饰小图标
- 不能用
width/height控制大小，只能调 border 宽度，比例难维持 - 无法填充渐变色，
border-image支持有限且复杂 - 现代项目里，用
clip-path或 SVG 替代它，代码更直白，维护成本更低
