用 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 的做法：一个稍大的同形状三角形做“边框”，一个稍小的放在上面盖住中心，视觉上形成描边效果。
使用场景：下拉菜单箭头、气泡提示的指向角、图标中的三角指示器。
立即学习“前端免费学习笔记（深入）”；
本文档主要讲述的是j2me3D游戏开发简单教程； 如今，3D图形几乎是任何一部游戏的关键部分，甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述，以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中，这称为立即模式。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
- 外层三角形：设置更大的
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 需多一层校验。
