能，纯CSS三角形只需width:0、height:0、三边transparent、单边实色；方向由实色边决定，大小由该边border-width控制；需注意height:0、display属性、overflow、transform等干扰因素。
能，而且不用 JS、不用 SVG、不新增 DOM 节点——只要 width: 0、height: 0、三边 transparent、单边实色，浏览器就会“挤”出一个纯 CSS 三角形。这是唯一兼容 IE8+、零运行时开销的方案。
为什么写了 border 却没看到三角形
不是代码写错了，是前提被悄悄破坏了：
-
width: 0但漏了height: 0→ 元素仍有默认高度（比如 inline 元素受line-height影响），底板残留，显示为梯形或小矩形块 - 元素是
<span>或其他 inline 元素，又没加display: block或display: inline-block→ 受基线对齐干扰，“吊着”不居中，三角位置飘忽 - 父容器设了
overflow: hidden→ 边框渲染区域被裁剪，三角直接消失（加outline: 1px dashed red一眼就能验证） - 祖先用了
transform、perspective或will-change→ 边框交汇角度微偏，三角歪斜或发虚
方向和大小怎么精准控制
方向由「哪条边设了实色」决定，不是“朝哪画”，而是“哪边留色”；大小只由该边的 border-width 值决定，其余三边必须等宽且为 transparent：
- 向下箭头 →
border-top: 8px solid #333，border-left/border-right等宽transparent - 向上箭头 →
border-bottom: 8px solid #333，border-left/border-right等宽transparent - 向右箭头 →
border-left: 8px solid #333，border-top/border-bottom等宽transparent - 向左箭头 →
border-right: 8px solid #333，border-top/border-bottom等宽transparent
别用 7.5px、0.5em 这类非整数 px 值——亚像素渲染会导致边缘模糊，尤其在非 Retina 屏上；移动端一律用 px。
立即学习“前端免费学习笔记（深入）”；
用伪元素实现零 DOM 开销的下拉箭头
实际项目里，三角形基本都是装饰用途（如下拉菜单指示符、气泡框小尖角），直接用 ::after 最干净：
- 目标元素加
position: relative -
::after设content: ""、position: absolute、width: 0、height: 0 - 用
top/right/bottom/left定位，再配transform: translate(-50%, -50%)微调居中（不能只靠margin或top: 50%） - 若父容器是 flex，检查是否被
flex-shrink压缩，必要时加flex-shrink: 0
最容易被忽略的是：content: "" 必须写，否则伪元素不渲染；position: relative 必须加在父级，否则 absolute 定位会相对于视口。
