箭头这东西，确实挺好用，但用起来得有点“玄学” 你见过那种箭头，不是用来指路要么标注方向的，而是像某种魔法棒，拽着数据往头顶上飘的那种吗？我遇到过。 在早期的设计稿里，设计师最爱用白色箭头，细细长长，尖儿朝上，跟个“上箭头”似的。

那时候网页上全是它们，密密麻麻地挤在一起，像是从天花板上一根根掉下来，打在你脸上。

那时候我就在想，这人是不是把箭头当积木了？随意搭搭，顺手往页面中心一拽，结局页面内容全没了，只剩下一堆乱飞的小三角。

那时候我就理解了，设计不是逻辑，是情绪。 后来我接手了个项目，看到那些箭头，内心既想吐槽又想触动。想吐槽的是排版逻辑忒乱了，想触动的是设计师终于把自己想表达的意图，用一种直白到让人毛骨悚然的方式塞进了代码。 那段工夫我实在忍不住，忍不住想给那个“上箭头”贴个标签。 一启动我试着写 CSS，想用 `::before` 要么 `::after` 做个伪元素，结局试了无数遍，还是学不会。 `:before { content: '▲'; position: absolute; top: -50px; }` `:after { content: '▼'; position: absolute; bottom: -50px; }` 这哪位顶得住啊？明明想要个“上”，为啥要在元素下面加个“下箭头”？并且还得让两个箭头互相排斥，别重叠，别打架，简直像是在指挥一个交响乐团，非要合奏二重奏。 后来我拉倒这种强行对半切的结构，转而思索：箭头到底是哪位的“分身”？ 是用户鼠标的手？是浏览器的“向上”指令？还是页面标题的“盖帽”？ 要是把它当成一个“盖帽”看，那设计逻辑就清楚了。 ```css .title-block { position: relative; padding-top: 1rem; padding-bottom: 1rem; } .title-block::before { content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-45deg); width: 16px; height: 16px; background: currentColor; border-radius: 50%; z-index: 0; } .title-block::after { content: ''; position: absolute; top: -12px; right: 50%; transform: translateX(50%) rotate(45deg); width: 8px; height: 8px; background: currentColor; border-radius: 50%; z-index: 0; } ``` 你看，这里用的是 `::before` 来做那个“斜杠”，`::after` 做那个“百分号”。它们不是两个独立的箭头，而是整个标题块的“上半身”和“下半身”。 那为啥还要把旋转角度设成 -45 度呢？出于要是不旋转，箭头就是正着立着的，像个刚长出来的嫩芽，让人看着没劲。旋转 45 度，歪歪扭扭地立着，才像个被强行塞进框里的笑话，才显得有点怪，才显得有点“设计感”。 我突然就想，这箭头是不是就是这种“怪”？ 有时候你看着网页上的箭头，会有一种错觉，认定它们从页面中心点爆发出来，然后瞬间消亡了，只留下那个尖尖。 ```css .bullet-point { display: inline-block; list-style: none; position: relative; } .bullet-point::before { content: ""; display: block; width: 16px; height: 16px; margin: 14px 0 14px 4px; background: currentColor; border-radius: 2px; transform: rotate(-45deg); } .bullet-point::after { content: ""; display: block; width: 16px; height: 16px; margin: 14px 0 14px 4px; background: currentColor; border-radius: 999px; transform: rotate(45deg); } ``` 你看，这里 `width` 是确定的，但 `margin` 是动态的。通过 `4px` 来调整左边距，进而管住出锋的角度。 要是改成 `margin: 14px 0 14px 40px;`，那箭头就会变得又直又长，像个步枪，彻底丧失了那种“斜杠”的俏皮感。 要是你非要改成 `margin: 14px 0 14px 4px;`，那箭头就会缩成一个小圆点，像个句号。 故此，这个 4px 究竟代表啥？ 它不代表“上”或“下”的物理距离，它代表的是“视觉重心”的偏移量。 当箭头中心点位于元素顶部时，水平距离为 4px 时，那个尖角看起来最锐利，最像那个“上”字。 要是这个值变大，比如变成 10px，箭头就会向左侧偏移更多，视觉上就会变成“上箭头”的变体，别看还是尖，但重心忒左了，让人看着别扭。 要是值缩小到 0，那这就是个正立的小圆点，再没有箭头了。 这就是箭头设计最精妙的地方：它没有方向，只有角度。 方向一般由 `top` 或 `bottom` 属性拍板，而角度则由 `margin` 或 `transform: rotate` 拍板。 有时候，设计师会精通这两种对立的艺术。 比如一个列表项： ```css .item { padding: 10px; border-radius: 4px; } .item::before { content: ''; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; background: currentColor; border-radius: 50%; } ``` 这里 `top: 50%` 让它居中，`left: -4px` 让它向左侧偏移，进而形成一个类似“人”字形的图案。 而下面的这个： ```css .item::after { content: ''; position: absolute; top: 50%; right: -4px; width: 8px; height: 8px; background: currentColor; border-radius: 50%; } ``` 这就把重心拉到了右侧，形成类似“人”字形的图案。 要是你把这两个都加上，那就是一个“人”字加个“人”字，像个倒着的“↓”。 乍一看像个下箭头，但仔细看，那实际上是两个“人”字顶在一起，中间夹着空隙。 为啥要这样？出于“人”字的结构本身就是为了顶。 要是你把它们都往外移，比如 `left: -12px;`，那这个“人”字就会裂开，变成一个庞大的“≡”，要么一个斜杠 `//`。 这就是箭头逻辑的精髓：它不是指物，它是对称的平衡。 要是你认定那个箭头忒怪，想要把它改得“正常”一点，比如变成一个标准的上箭头。 那就把 `left` 从 `-4px` 改成 `0px`。 ```css .item::before { content: ''; position: absolute; top: 50%; left: 0px; / 去掉左偏移 / width: 16px; height: 16px; background: currentColor; border-radius: 50%; } ``` 目前你看，这个箭头就干净利落了，像个标准的向上指示符。 但你再看看那个 `margin` 逻辑。

要是我把顶部的 `top` 改成 `50%`，但底部的 `bottom` 改成 `4px`，那这个元素就会往上飘，变成一个飞行的箭头。 而那些从页面中心点喷射出来的箭头，一般是为了强调重点。 比如一个“推荐”图标： ```css .badge { position: relative; display: inline-flex; align-items: center; } .badge::before { content: ''; position: absolute; top: 50%; left: -12px; width: 16px; height: 16px; background: currentColor; border-radius: 50%; transform: translate(-50%, -50%) rotate(45deg); } ``` 你看，这里 `transform` 里的 `translate(-50%, -50%)` 是关键。它先把箭头放在中心点，然后旋转 45 度，再向左下偏移。 然后再用 `content: ''` 创建一个虚线，覆盖住旋转后的箭头尖。 ```css .badge::after { content: ''; position: absolute; top: 50%; left: -12px; width: 16px; height: 16px; background: currentColor; border-radius: 50%; transform: translate(-50%, -50%) rotate(45deg); } ``` 通过旋转 45 度，原本尖尖的箭头变成了斜的，然后再用虚线切掉尖角，最终变成一个标准的上箭头。 这个过程有点费脑子，但一旦做对，那种“既像箭头又像装饰，又像是在对话”的感觉，就出来了。 有时候你会认定，箭头就像是一个“路标”，它告诉你：这里有个东西，请注意。 但有时候，它更像是一个“邀请”。 当你看到这个斜着立着的箭头时，它不是在告诉你“去上面”，而是在告诉你：“看，你看那个尖尖，它想要钻进你的屏幕里。” 它利用了视觉的惯性。 当你的眼被正立的东西吸引时，斜着的东西就会出于“富余”而显得傻气；但当你的眼被斜着的东西吸引时，正立的东西又显得富余。 设计师挺精通利用这种“富余”。 比如在“上箭头”里，要是加个虚线，那它就是上箭头；要是去掉虚线，只有实线，那它就是“上”字。 要是加了实线，却把箭头画成斜的，那它就是“上”字 + 虚线。 这四种状态，实际上就是同一根“上”线的不同切片。 切片的角度不同，拿到的含义就不同。 要是你想要一个“左移上箭头”，那就把 `left` 参数设定为正值。 要是你想要一个“右移上箭头”，那就把 `left` 参数设定为负值。 要是你想要一个“垂直移动”，那就调整 `top` 或 `bottom` 的参数。 箭头压根儿不是用来“读”的，它是用来“看”的。 当你看着一个箭头时，你起初看到的是它的形状。 然后你才反应过来，这形状代表啥意图。 要是你只是盯着那个尖尖看，你只看到了一个几何图形。 但要是你把视线拉远一点，去理解它背后的布局逻辑，你就会发现，它实际上是在玩一场关于对称和平衡的游戏。 它用 45 度的斜角，打破了平面的单调。 它用虚线，打破了实线的沉甸甸。 它用负值的距离，打破了正值的沉甸甸。 它像是一个微型的 3D 模型，被强行塞进了 2D 的网页空间里。 这贼不美。 但这，或许就是它存有的意义。 它提醒我们，设计压根儿不是为了完美，不是为了规整划一，而是为了让原本粗糙的界面，略微有点人情味。 当箭头尖尖地立在你的眼前时，它不是在指路。 它是在说你：嘿，看看这个，它有点歪，有点斜，有点怪，但看久了，你会发现它实际上挺有意思的。 它像是一个在对话框里蹦出来的气泡，突然飘到了页面中央，带着一种“我想见你”的冲动。 有时候，箭头比文字说得更清楚。 它不需求解释，它只需求一个角度。 45 度，就连 60 度，就连 30 度。 只要角度够对，那个尖尖，那个斜杠，那个虚线，那个中心点，就能组合成一个整个的“指示符”。 故此，下次当你看到那些乱七八糟的箭头时，别把它们当成了伤眼的符号。 把它们当成一种视觉语言。 它们是在和你玩一种叫做“错位”的游戏。 在这个游戏里，规则挺好办：别忒直，别忒圆，要带点斜，带点歪。 只要你够智慧，够耐心，你就能读懂它们那无声的对话。 毕竟，在网页的世界里，唯一确定的东西就是宽度，而剩下的，全是关于角度、关于位置、关于心意的艺术。