画三角形有三种主流方案：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
比起 canvas 的命令式绘图和 CSS 的裁剪模拟，SVG 的
典型错误是点坐标写成字符串但格式不对，比如多空格、逗号后少空格，或点数不够三个——浏览器会静默失败，图形不出现。
-
points属性值是一串空格/逗号分隔的x,y对，如"0,0 50,100 100,0" - 不需要闭合：SVG 自动首尾连线，写三个点就构成三角形
- 可直接设
fill和stroke属性，无需额外 CSS - 嵌入 HTML 时注意命名空间，但内联 SVG 不用额外处理
为什么不用 border 技巧？
老办法“用 div 的 border 拼三角形”在 html5 场景下基本不推荐了——它依赖 border 渲染的几何巧合，可控性差，无法旋转、缩放易失真，且不能设置圆角或阴影。
比如 border-left: 50px solid transparent 这类写法，一旦父容器有 transform 或 flex 布局干扰，位置就飘；更别说想让它响应鼠标事件时，点击热区和视觉形状严重不一致。
- 仅适用于静态、极简、无交互需求的纯装饰小图标
- 不能用
width/height控制大小，只能调 border 宽度，比例难维持 - 无法填充渐变色，
border-image支持有限且复杂 - 现代项目里，用
clip-path或 SVG 替代它，代码更直白，维护成本更低
实际选哪种，取决于你要的是动态生成（canvas）、纯样式点缀（CSS clip-path），还是结构清晰可交互的图形（SVG）。三者底层原理完全不同，别指望一个方案通吃所有三角形需求。