css三角形是浏览器在width/height为0元素的border交汇处自动挤出的等腰直角三角形，需三边transparent、单边实色，方向由设色边决定（如border-top向下），大小由该边border-width整数px值控制；失效主因是overflow:hidden、font-size干扰、未设display:block或transform缩放导致边界偏移。
能，但必须让元素宽高为0、三边transparent、仅一边设实色——这不是“画”出来的，是浏览器在border交汇处自动挤出的等腰直角三角形；方向由哪条border-*设色决定，大小由该边的border-width整数px值控制。
为什么三角形总不出现或歪斜
问题几乎从不来自代码本身，而是上下文悄悄破坏了前提条件：
- 父容器设置了
overflow: hidden，而三角形用position: absolute偏移出界 → 边框被裁掉，直接消失 -
font-size或line-height不为0（哪怕只是14px）→ inline 元素被基线撑开，实际尺寸不为 0，三角塌成梯形 - 没加
display: block或display: inline-block→ 默认 inline 受文字流影响，“吊着”不居中，位置飘忽 - 祖先元素用了
transform: scale()→ 部分浏览器会重算border-width，导致顶点偏移
调试时加一句outline: 1px dashed red，立刻看清真实边界，比猜快十倍。
方向和大小怎么精准控制
方向由「哪条边设了实色」决定，不是“朝哪画”，而是“哪边留色”；大小只由该边的border-width值决定，其他三边宽度必须相等且非零：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 向下箭头 →
border-top: 8px solid #333，其余三边transparent - 向上箭头 →
border-bottom: 8px solid #333，其余三边transparent - 向右箭头 →
border-left: 8px solid #333，其余三边transparent - 向左箭头 →
border-right: 8px solid #333，其余三边transparent
border-width必须用整数px单位（如8px），避免7.5px这类值——亚像素渲染会让边缘发虚，尤其在非 Retina 屏上。
用伪元素生成箭头时定位总偏移
伪元素默认以content为基线参与行内布局，直接margin-top或top硬调容易失准，尤其在flex或不同字体环境下：
- 正确做法：设
position: absolute+top: 50%+transform: translateY(-50%)垂直居中 - 水平对齐同理：用
left: 100%+transform: translateX(-50%)靠右并居中自身 - 关键约束：父容器必须有
position: relative，否则absolute会相对于body定位 - 别忘了写
content: ""，否则伪元素不渲染
这个三角没有坐标、没有路径、不占文档流，它只依附于盒模型边界——一旦父级布局微调、字体变化或缩放发生，位置就可能脱节。最稳的做法是把它绑在固定尺寸容器上，并始终用px单位控制大小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
