用 css border 画三角形最简单，原理是宽高为0时四边框交界形成斜角，仅设单边有色边框、其余透明即可；clip-path 更灵活可精确控制顶点；svg 最可控适合动画与交互。
用 CSS border 画三角形最简单
纯 CSS 实现三角形，border 是最轻量、兼容性最好的方式，不需要额外标签或 JS。原理是利用元素宽高为 0 时，四个方向的 border 在交界处形成的斜角。
- 只设一个方向的
border（比如border-bottom），其余三个方向设为透明border，就能得到朝那个方向的三角形 - 三角形大小由对应方向的
border-width控制；角度由相邻两个border的宽度比决定（等宽时是等腰直角三角形） - 别忘了把
width和height都设成0，否则边框会叠加在盒模型上，形状错乱 - IE8+ 全支持，但注意：如果父容器有
overflow: hidden，可能裁掉三角形尖角
例如向下箭头三角形：
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
用 clip-path 画任意方向/等边三角形更灵活
当需要精确控制顶点坐标、旋转角度，或画等边三角形时，clip-path 比 border 更直接，语义也更清晰。
-
clip-path: polygon()接收一组坐标，单位可以是%、px或vw，推荐用%保证响应式 - 等边三角形三个顶点可设为：
50% 0%, 0% 100%, 100% 100%（顶点朝上） - Firefox 和 Safari 对
clip-path的polygon()支持良好，但旧版 Edge 不支持；若需兼容 IE，不能单独依赖它 - 性能上比
border略低（涉及渲染路径重计算），但现代浏览器几乎无感
示例（顶点朝上的等边三角形）：
立即学习“前端免费学习笔记（深入）”；
.triangle-up {
width: 100px;
height: 100px;
background: #333;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
用 SVG 画三角形最可控、适合图标和动画
如果三角形要参与交互、缩放不失真、或后续加动画/描边/渐变，SVG 是唯一靠谱选择。
- 直接用
<polygon points="x1,y1 x2,y2 x3,y3"></polygon>定义三个顶点，坐标一目了然 - 所有 SVG 属性（
fill、stroke、transform）都原生支持，旋转、缩放不会模糊 - 嵌入 HTML 可以内联写法，避免额外 HTTP 请求；但注意：内联 SVG 的
id在页面中必须唯一，否则<use></use>引用会出错 - 不推荐用
img标签引用 SVG 文件——那样无法用 CSS 控制内部颜色或响应事件
内联 SVG 示例：
<svg width="60" height="52" viewBox="0 0 60 52"> <polygon points="30,0 0,52 60,52" fill="#333"/> </svg>
别踩这些坑：常见错误现象与修复
实际写的时候，这几个问题高频出现，且原因隐蔽：
- 三角形显示不出来 → 检查是否漏了
width: 0; height: 0;（border方案）或background/fill（clip-path和 SVG 方案） - 三角形边缘发虚/模糊 → 多半是用了小数像素值（如
border-width: 4.5px），改用整数；SVG 则检查viewBox是否匹配width/height - 移动端点击区域太小 →
border三角形本身不可点击，需包裹一层div并设padding扩展热区；SVG 可直接在<polygon></polygon>上加cursor: pointer - 用
transform: rotate()旋转border三角形后位置偏移 → 因为旋转中心默认是左上角，记得加transform-origin: center
border 方案够用就别上 SVG，SVG 强大但多一层复杂度；clip-path 是中间路线，但得心里有底它的兼容边界。
