用 border 实现三角形时无法直接添加边框，因其边框本身就是构成三角形的本体；可行方案是双层伪元素叠加模拟描边，或改用 SVG 以获得精确、稳定、高 DPI 友好的描边效果。
用 border 实现三角形时边框不可见？
HTML 本身没有“三角形元素”，所谓三角形全是靠 border 技巧 hack 出来的——利用相邻边框颜色透明、只留一条有色边，再配合 width/height 为 0 来挤出角度。这时候你发现：想加边框？根本加不上，因为边框就是构成三角形的本体。
常见错误现象：border: 2px solid red 写上去没反应，或者三角形直接变形、错位、变色块。
- 本质原因：三角形靠
border-top、border-left等单侧边框“画”出来，再加统一border会覆盖/干扰原有逻辑 - 真正能生效的只有“描边”思路：用多层伪元素或额外包裹，把边框变成另一层叠加的轮廓
- 纯 CSS 单元素方案中，
outline也不行——它不跟随三角形尖角，而是包住整个盒模型（此时盒模型是 0×0，outline 压根不显示）
用两个重叠的 border 三角形模拟描边
这是最可控、兼容性好（IE9+）、无需 JS 的做法：一个稍大的同形状三角形做“边框”，一个稍小的放在上面盖住中心，视觉上形成描边效果。
使用场景：下拉菜单箭头、气泡提示的指向角、图标中的三角指示器。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 外层三角形：设置更大的
border-width，所有边设为描边色，但其中三边用transparent，留出朝向一致的一边（比如向下箭头就留border-bottom） - 内层三角形：
margin往里缩一点（如margin: -2px），用目标填充色，同样只设单边border - 必须用
position: relative+position: absolute叠在一起，否则外层会撑开布局
.arrow-down {
position: relative;
width: 0;
height: 0;
}
.arrow-down::before {
content: "";
position: absolute;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #999; /* 描边色 */
top: 0;
left: 50%;
transform: translateX(-50%);
}
.arrow-down::after {
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #333; /* 填充色 */
top: 2px;
left: 50%;
transform: translateX(-50%);
}SVG 是更干净的替代方案
如果你需要精确控制边框宽度、圆角、抗锯齿，或者三角形要响应式缩放，<svg></svg> 不是“过度设计”，而是合理选择。
性能影响几乎可忽略，现代浏览器渲染 SVG 三角形比 border hack 更稳定，且支持 stroke、stroke-width、stroke-linejoin 等原生描边属性。
- 不用计算 border 宽度差值，坐标直给：三个点连成
<polygon points="..."></polygon> -
stroke就是边框色，fill是填充色，stroke-width控制粗细，无歧义 - 注意：默认
stroke是居中绘制的，若要“内描边”或“外描边”，需用stroke-alignment（目前仅 Safari 支持），否则老实用transform: scale()微调
<svg width="20" height="12" viewBox="0 0 20 12">
<polygon points="0,0 20,0 10,12"
fill="#333" stroke="#999" stroke-width="2"/>
</svg>别忽略高 DPI 屏幕下的像素对齐问题
border 三角形在 Retina 屏或缩放 125% 的 Windows 上容易发虚、偏移半像素，尤其描边时更明显——因为 border 计算基于设备像素，而 CSS 像素是逻辑单位。
- SVG 方案天然适配，只要
viewBox和width/height搭配得当，缩放无损 - border 方案可加
transform: translateZ(0)或will-change: transform强制 GPU 渲染，缓解模糊 - 更稳妥的是：用
@media (-webkit-min-device-pixel-ratio: 2)单独调整 border 宽度为 .5px（但需确认浏览器支持）
复杂点不在怎么画，而在怎么让边框在各种缩放、DPR、字体平滑设置下都稳得住——这点 SVG 默认赢，CSS border 需多一层校验。
