最常用、兼容性最好、零js的纯CSS三角形方案是利用border斜角特性：设宽高为0，三边transparent、一边有色，方向由有色边决定，大小由border-width控制。
用 border 实现纯 CSS 三角形
html 里没有原生三角形标签，最常用、兼容性最好、零 JS 的方案是利用 border 的斜角渲染特性。浏览器绘制元素边框时，相邻两边的交界会自然形成 45° 斜线——只要把其他三边设为透明，留一边有颜色，就能“抠”出三角形。
- 只给一个方向的
border设颜色，其余三个方向必须设为transparent（不能用none，否则无宽度、无形状） - 宽高得设成
0，否则内容区会撑开，破坏三角形结构 - 方向由哪条边有色决定：比如
border-bottom有色 → 向下指的三角形；border-left有色 → 向右指的三角形 - 大小由对应边框的宽度控制：
border-width: 20px生成的等腰直角三角形，底边长 ≈ 40px，高 ≈ 20px
div { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #333; }用 clip-path 做更灵活的三角形
如果需要非等腰、带角度、或响应式缩放的三角形，clip-path 更可控。它直接裁剪元素视觉区域，不依赖边框 hack，支持任意多边形坐标。
- 必须配合
width/height设置一个基础容器（比如div），否则裁剪无作用范围 - 坐标系以元素左上角为
(0 0)，百分比值更适配响应式，像素值更精确 - 旧版 safari 需加
-webkit-clip-path前缀，ios 15.4+ 已原生支持 - 性能比
border方案略低，频繁动画时可能掉帧
div { width: 100px; height: 100px; background: #333; clip-path: polygon(0 0, 100% 0, 50% 100%); }为什么不用 SVG？
SVG 确实能画任意三角形，语义清晰、缩放无损、可交互，但引入额外标签和复杂度。如果你只是要一个装饰性小箭头或分隔符，用 border 或 clip-path 更轻量。
- SVG 需要写
，HTML 结构变多 - 内联 SVG 在某些老邮箱客户端中不渲染，
border方案兼容到 IE8 - 如果三角形要响应鼠标事件（比如点击展开），SVG 的
pointer-events: all
常见错误：三角形歪了、看不见、错位
多数问题出在盒模型干扰或单位混用。
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
transform: scale()或zoom，会导致border三角形比例失真——改用clip-path或重算border-width - 写了
border: 20px solid #333却没清空其他方向，结果出来的是个带边框的方块 - 用
rem或%设border-width，但根字号变化后三角形大小突变——固定尺寸优先用px -
clip-path坐标写成(0, 0)（逗号分隔），实际要空格分隔：0 0，否则整个声明失效，浏览器静默忽略
实际项目里，80% 的小三角形用 border 就够了；剩下那些需要旋转、倾斜、或动态计算坐标的，才值得切到 clip-path 或 SVG。别一上来就堆方案。