用纯html+css绘制可控上升/下降箭头，应采用svg内联方案：语义清晰、无锯齿、可缩放、支持class切换颜色与transform翻转，配合em单位和vertical-align精准对齐文本基线。
怎么用纯 HTML + CSS 画一个带颜色的上升/下降趋势箭头
不能只靠 ↑ 或 ↓ 字符凑数——它们无法动态变色、缩放或对齐基线。真正可控的做法是用 <svg></svg> 内联绘制，或者用 CSS 生成三角形。前者更稳，后者更轻量但有兼容性限制。
推荐直接用 SVG：语义清晰、缩放无锯齿、可内联样式、支持伪类交互（比如 hover 变色）。
- 上升箭头 SVG 示例：
<svg width="12" height="12" viewbox="0 0 12 12"><path d="M6 2 L10 6 L8 6 L8 10 L4 10 L4 6 L2 6 Z" fill="green"></path></svg>
- 下降箭头只需把
fill改成red，或复用同一 SVG 通过 class 切换颜色 - 注意
viewBox和宽高要一致，否则会拉伸变形；path坐标建议用整数，避免 subpixel 渲染模糊
如何让箭头自动适配文字大小和行高
硬写 width="12" 会导致在不同字体尺寸下错位。正确做法是把 SVG 设为 inline，并用 em 单位控制尺寸，同时借助 vertical-align 对齐文本基线。
- 给 SVG 加
style="width: 0.8em; height: 0.8em; vertical-align: -0.15em;" - 不要设
font-size在 SVG 上——它不继承父级字号，而是按自身viewBox缩放 - 如果配合
<span></span>显示数值（如+3.2%），把箭头和文字包在同一<span></span>里，避免换行断开
用 CSS 伪元素生成箭头时容易漏掉的关键样式
有人用 ::after + border 三角技巧，但常出现位置飘移、颜色不随文字变、无法独立响应 hover 的问题。
- 必须显式设置
content: ""，否则伪元素不渲染 - 三角方向靠
border组合，例如上箭头：border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid green; - 要用
position: absolute定位时，父容器得加position: relative，否则脱标错乱 - 伪元素默认是 inline，若父元素是 flex 或 grid，需加
align-self: center对齐
数据动态变化时，怎么安全切换上升/下降箭头
别用 JS 频繁替换整个 SVG 节点——DOM 操作重。更优解是预先写好两个 <svg></svg>，用 class 控制显隐；或只换 fill 和 transform: scaleY(-1) 复用一个 SVG。
- 推荐单 SVG + class 切换：
<svg class="trend-icon trend-up">...</svg>
CSS 中定义：.trend-up { fill: #28a745; }/.trend-down { fill: #dc3545; transform: scaleY(-1); } - 避免用
display: none切换——会导致重排；改用opacity: 0; pointer-events: none;更平滑 - 如果箭头需做动画（如数值更新时轻微弹跳），只对
transform和opacity做 transition，别碰width或height
最易被忽略的是 SVG 的 viewBox 原点和路径坐标系——一旦改了数值范围（比如从 0–12 改成 0–24），所有坐标都要同比例缩放，否则箭头会偏出可视区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
