最常用可靠的CSS三角形方案是border法：宽高设为0，三边transparent，单边有色，大小由对应border-width决定；clip-path更灵活但兼容性稍差；SVG精准可交互，适合图标与动画。
用 CSS border 画三角形最常用也最可靠
纯 HTML 标签本身没有“三角形”语义，所有三角形都是靠 CSS 技巧模拟出来的。border 是最主流、兼容性最好、性能最轻量的方式，原理是利用边框交汇处的斜角特性——把其他三边设为透明，只留一边有颜色，就能挤出一个三角形。
常见错误现象：元素看不见、三角形方向反了、大小失控，基本都因为没清空宽高或 border 宽度设得不一致。
- 必须把
width和height都设为0 - 只保留一个方向的
border有颜色，其余三个方向设为transparent（不能用none） - 三角形大小由对应方向的
border-width决定；比如要向下指的三角形，就调border-top的宽度 - IE8+ 全支持，不需要前缀
div.triangle-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #333;
}
用 clip-path 实现更灵活的三角形（现代方案）
clip-path 能直接定义任意多边形形状，画三角形更直观，但兼容性不如 border 方案。适合需要旋转、响应式缩放、或非等腰三角形的场景。
容易踩的坑：clip-path: polygon() 坐标是相对于元素盒模型的百分比或像素值，如果父容器没设 position: relative，又用了绝对定位子元素，坐标容易偏移；另外 Safari 旧版本对 clip-path 的 inset() 支持不全，但 polygon() 没问题。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
clip-path: polygon(0% 0%, 100% 0%, 50% 100%)画正三角形 - 坐标顺序影响渲染方向，顺时针写更稳妥
- 配合
transform: scale()可无损缩放，而 border 方案缩放会模糊 - Chrome/Firefox/Edge 90+、Safari 15.4+ 原生支持，无需前缀
div.triangle-up {
width: 100px;
height: 100px;
background: #333;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
SVG 三角形：精准、可交互、适合图标和动画
如果三角形要参与点击、hover、CSS 动画，或者需要抗锯齿、高清缩放（比如 retina 屏）， 是最稳的选择。它本质是矢量图形，不是“骗”出来的视觉效果。
使用场景：UI 图标、加载指示器、数据可视化中的标记点、带描边/渐变的三角形。
- 用
- 不要漏掉
viewBox，否则在不同尺寸容器里可能显示异常 - 内联 SVG 可以直接用 CSS 控制
fill、stroke，也能加:hover类名 - 注意
默认是 inline 元素，需要display: block或vertical-align来对齐
别用 canvas 画静态三角形——除非你真需要动态生成
的 drawPath / fillTriangle 确实能画，但它属于“运行时绘制”，对 SEO、可访问性、样式控制都不友好。静态三角形用 canvas 就像用锤子钉螺丝——能动，但没必要。
真正该用 canvas 的时候：三角形顶点坐标每帧变化（比如粒子系统）、要叠加滤镜、或批量绘制成百上千个三角形且需高性能。
- 静态图用 canvas 会导致无法被屏幕阅读器识别，也无法被 CSS 选择器选中
- 修改颜色/大小必须重绘整个 canvas，而 CSS 方案改一个属性就行
- 导出为图片时 canvas 更方便，但这不属于“写出来”的范畴
border，后者优先 clip-path 或 svg。很多人卡在 border 方案里反复调 margin 和 position，其实只要记住「宽高归零、三边透明、一边有色」，八成问题就没了。 
