能，且是最轻量兼容方案：需宽高为0、三边transparent、仅留一边有色边框；浏览器在角交汇处自动形成45°斜边，收束成三角；方向由着色边决定，大小由对应border-width控制；伪元素::after实现零DOM开销，须注意单位、定位与渲染兼容性。
能，而且是最轻量、最兼容的方案——但必须满足三个硬条件：宽高为0、三边transparent、仅留一边有色边框。
为什么border能“挤”出三角形
浏览器渲染边框时，会在元素四个角交汇处自动形成45°斜边。当width和height都为0，四条边框就全部收束到一个点上；此时把其中三边设为transparent，只剩一边有颜色，视觉上就“挤”出了一个实色三角形。
常见错误现象：div写了width: 0; height: 0;却看不到三角——大概率是父容器设置了overflow: hidden，把外溢的边框裁掉了；或者元素被line-height、font-size撑开，实际尺寸不为0。
- 方向由哪条边着色决定：
border-bottom→ 向上三角，border-top→ 向下三角，border-left→ 向右三角，border-right→ 向左三角 - 大小由该边
border-width值决定，比如border-bottom: 12px solid #333;生成一个底边约12px高的向上箭头 - 想更尖锐？可减小另外两边的
border-width（但不能为0，否则交汇点消失）
用::after伪元素实现零DOM开销的下拉箭头
实际项目中，三角形多用于按钮右侧的下拉指示符、气泡框的小尖角等装饰场景。直接挂载在目标元素上最干净，::after伪元素天然满足“不增加语义节点”的需求。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给目标元素设
position: relative，伪元素用position: absolute定位 - 垂直居中别用
margin-top硬调，改用top: 50%; transform: translateY(-50%); - 移动端缩放时三角糊掉？
border-width必须用px单位，禁用em或rem（它们随字体缩放，破坏比例） - 父容器是
display: flex？确保伪元素没被flex-shrink: 0以外的规则压缩变形
边缘发虚、白边、三角塌陷的典型原因
这些不是代码写错了，而是渲染层面的细节问题：
- 亚像素渲染：当
border-width不是整数（如9.5px），非Retina屏会插值，导致边缘半透明 - 三角塌陷：四边
border-width不一致，或某边border-width设为0，交汇点无法形成，变成一条线或完全不可见 - 颜色继承异常：伪元素未显式声明
border-color，可能意外继承父级color或border-color，尤其在深色模式切换时出错
真正难的是在复杂布局里稳住三角的位置和比例——它不占文档流，但对父容器的overflow、transform、will-change都敏感。写完别只看Chrome，务必在Safari iOS 15.4+ 和旧版Android WebView里验证clip-path备选方案是否真有必要启用。
