纯 CSS 可用 border 实现单色实心三角形：宽高为 0，仅保留一个方向的有色 border，其余三边 transparent；clip-path 适合任意形状但兼容性受限；伪元素更轻量；SVG 最健壮且支持无障碍。
纯 CSS 就能画三角形，不需要图片、SVG 或 Canvas —— 关键是利用 border 的渲染特性，配合 transparent 边框和尺寸控制。
用 border 实现单色实心三角形
这是最常用、最轻量的方法：把元素宽高设为 0，只保留一个方向的 border（比如 border-bottom），其余三边设为 transparent，浏览器会自动把 border 交界处渲染成斜边，形成三角形。
常见错误现象：border 值写成相同颜色、没清空其他三边、忘了设 width: 0; height: 0;，结果画出的是梯形或矩形块。
- 向下箭头（底边朝下）：
border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #333; - 向右箭头（右边朝右）：
border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #333; - 大小由 border 宽度决定；角度由左右/上下 border 宽度比控制（等宽 = 等腰直角）
用 clip-path 绘制任意方向、带圆角或非等腰三角形
clip-path 更灵活，适合需要精确坐标、非直角、或响应式缩放的场景，但 IE 不支持，移动端需注意 Safari 兼容性（clip-path: polygon() 在 iOS 15.4+ 才稳定）。
立即学习“前端免费学习笔记（深入）”；
使用场景：图标按钮中的斜角标签、数据可视化里的自定义形状、需要 CSS 动画旋转的三角指示器。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正三角形（顶点朝上）：
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); - 带圆角的三角形：先用
clip-path切出三角，再加border-radius（仅对部分圆角生效，更可靠的做法是用path()配合 SVGclipPath） - 性能影响：频繁动画
clip-path可能触发重排，建议加will-change: clip-path;或用transform替代
用伪元素 ::before/::after 避免额外 DOM 节点
多数实际项目里，三角形只是装饰（如气泡框的小尖角、下拉菜单指示符），直接挂载在目标元素上最干净。伪元素天然满足“零 DOM 开销”，且可继承父级颜色、字体等样式。
容易踩的坑：position: absolute 后没给父容器设 position: relative，导致定位错乱；或忘了设置 content: ""，伪元素不渲染。
- 气泡框右下角小三角（指向右侧）：
.bubble::after { content: ""; position: absolute; top: 12px; right: -6px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #666; } - 颜色同步技巧：用
border-left-color: currentColor;，让三角随文本色自动变色 - 不能用伪元素实现
clip-path动画（部分浏览器不支持伪元素的clip-path过渡）
用 SVG 内联替代方案：兼顾语义、缩放与可访问性
当三角形需要被屏幕阅读器识别、或必须高清缩放（如打印样式）、或要配合 JS 动态计算坐标时，内联 SVG 是更健壮的选择。体积略大，但无兼容性焦虑，CSS 也能控制其 fill/stroke。
关键细节：别漏掉 viewBox，否则缩放失真；width/height 设为 1em 或百分比才能响应式；若作图标，加 aria-hidden="true" 或 role="img"。
- 简单右向三角：
<svg width="1em" height="1em" viewBox="0 0 10 10"> <polygon points="0,0 10,5 0,10" fill="#333"/> </svg>
- 和文字行高对齐：用
vertical-align: middle;或display: inline-flex;包裹 - 不能用 CSS
transform: rotate()精确控制 SVG 内部<polygon>，应直接改points属性或整体 rotate SVG 元素
border 法够用就别上 clip-path 或 SVG，但一旦涉及非等腰、动态尺寸、或需要无障碍支持，就得切换方案。最容易被忽略的是：所有方法都依赖盒模型行为，如果父容器有 overflow: hidden 或 transform 层叠上下文，可能意外裁剪三角形尖端。
