用CSS border画三角形最简单：设width:0;height:0;，仅保留单向border（如border-top），其余为transparent；SVG更可控，用定义顶点；Canvas对静态三角形属过度设计。
用 CSS border 画三角形最简单
纯 HTML 标签本身不支持直接“画”三角形，但用一个空的 <div> 配合 CSS 的 <code>border 属性，能高效生成任意方向的实心三角形，兼容所有现代浏览器，且无需 JS。
- 原理是利用 border 相邻边交界处的斜角——只保留一个方向的 border，其余设为透明，就能露出三角形
- 必须设置
width: 0; height: 0;，否则 border 会撑开成梯形或矩形 - 四个方向对应不同 border 组合：
border-top向下指，border-bottom向上指，border-left向右指，border-right向左指 - 示例（向下箭头三角形）：
.triangle-down { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; }
用 SVG 画三角形更可控、可缩放
如果需要精确坐标、响应式缩放、描边/填充分离，或者后续要动画或交互，SVG 是更稳妥的选择。它本质是矢量图形，不会模糊，也不依赖元素尺寸归零技巧。
- 用
<polygon></polygon>最直观：三个顶点坐标决定形状，顺序影响填充方向（但通常不影响显示） - 注意单位：默认是像素，但可配合
viewBox实现等比缩放 - 不要漏写
fill，否则三角形不可见；设为none可只留描边 - 示例（等边三角形，居中）：
<svg viewBox="0 0 100 100"> <polygon points="50,10 90,90 10,90" fill="#4a6fa5" /> </svg>
避免用 canvas 画静态三角形
Canvas 虽然能画，但对纯静态三角形属于过度设计——它需要获取上下文、调用路径 API、手动 stroke/fill，还要处理像素比、重绘逻辑，且无法被 CSS 直接控制样式。
- 常见错误：只调用
ctx.beginPath()和ctx.moveTo()，却忘了ctx.closePath()或ctx.fill() - Canvas 输出是位图，放大后边缘可能模糊；而 CSS 和 SVG 均为矢量
- 仅当三角形需实时计算坐标（如数据可视化动态更新）或复杂混合渲染时，才值得上 Canvas
border 方案的坑：IE8 及以下不支持 transparent
老项目若还需兼容 IE8，border-color: transparent 会被忽略，导致三角形变成实色块或错位。此时得用滤镜 hack 或降级为图片，但更现实的做法是确认是否真需支持——多数场景已可安全忽略。
立即学习“前端免费学习笔记（深入）”；
- 检查方式：在 IE8 下看三角形是否“胖了一圈”或颜色异常
- 替代方案（不推荐）：
border-color: #fff #fff #000 #fff（用白边模拟透明，但依赖背景色） - 真正麻烦的不是画不出来，而是维护成本——一套样式要同时满足 border 技巧 + SVG fallback + IE8 补丁，很快失控
