最直接的css三角形方案是利用border斜角特性：设元素宽高为0，仅保留单边有颜色的边框，其余三边transparent；clip-path和svg则更灵活精准。
用 CSS border 画三角形最直接
HTML 本身没有“三角形”标签，所有纯 CSS 实现的三角形本质都是利用 border 的斜角渲染特性。关键不是“插入”，而是“用 div + border 模拟”。
常见错误是试图给元素设 width/height 同时又设大边框——结果看到的是一个带缺口的方块，不是实心三角。
- 只保留一个方向的
border（比如border-bottom），其余三边设为transparent - 元素自身宽高必须为
0，否则边框会叠加在内容盒上，形状失真 - 方向由哪条边有颜色决定：下边有色 → 向下指；右边有色 → 向右指
示例：向下箭头
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #333;
}
用 clip-path 做更灵活的三角形
当需要等边、旋转、或响应式缩放时，border 方案很快吃力——边长和角度被边框宽度强绑定，改尺寸就得重算三边值。
立即学习“前端免费学习笔记（深入）”；
clip-path 直接按坐标裁剪，语义清晰，支持 vw/% 单位，也兼容 transform。
- 用
polygon()定义三点坐标，例如clip-path: polygon(50% 0%, 0% 100%, 100% 100%)是正三角形 - 注意浏览器兼容性：
clip-path在 Safari 旧版本需加-webkit-前缀 - 不要对 inline 元素使用
clip-path，先确保它是block或inline-block
SVG <polygon></polygon> 是最稳的方案
如果三角形要参与交互（如 hover、动画）、需要精确坐标控制、或必须高清缩放，就别硬扛 CSS。SVG 天然矢量，单个 <polygon></polygon> 标签就能定义任意三角形。
- 三个顶点坐标写在
points属性里，空格分隔，例如points="0,0 50,100 100,0" - 可直接设
fill、stroke，也能加class用 CSS 控制样式 - 嵌入 HTML 时建议用内联 SVG（而非
<img alt="如何在html5中插入三角形" >），否则无法用 CSS 选中内部元素
示例：
<svg width="100" height="87"> <polygon points="0,0 50,87 100,0" fill="#4a5568"/> </svg>
伪元素 ::before/::after 常被忽略的坑
很多人想用伪元素画小三角（如下拉菜单箭头），但常遇到定位偏移、z-index 被盖、或父元素没设 position: relative 导致绝对定位失效。
- 伪元素必须显式设
content: ""，否则不渲染 - 若用
border方案，父元素最好设overflow: hidden，防止三角尖角在某些缩放下溢出 - 避免在
display: flex容器里直接对伪元素设align-self——它不继承主轴对齐，得靠margin或transform微调
真正难的不是画出来，是让它在不同字体大小、行高、缩放比例下都稳住位置。这时候 SVG 内联或 clip-path 的可控性优势就明显了。
