纯css三角形最常用方法是利用border斜角特性：设宽高为0，仅保留单边有色border，其余三边为transparent；clip-path更灵活，适合等边、旋转或响应式场景；svg最可靠，适合图标与高保真需求。
用 border 实现纯 CSS 三角形
HTML 里没有“三角形标签”，最常用、最轻量的做法是利用 border 的斜角渲染特性来“抠”出一个三角形。本质是把一个宽高为 0 的元素，只设单边 border（比如 border-bottom），其余三边设为透明，浏览器自动把交界处画成斜边——这就成了三角形。
常见错误现象：border 颜色没设全，或三边用了 none 而不是 transparent，结果三角形不显示或错位；还有人给元素设了 width/height，反而撑开形状，破坏三角效果。
- 只保留需要朝向的那一侧 border（如向下箭头就用
border-bottom），其他三边必须设为border: transparent，不能省略或写0 - 元素本身必须是
width: 0; height: 0，否则 border 会叠加在盒模型上，不是纯三角 - border 宽度决定三角形大小，比如
border-bottom: 20px solid #333就生成底边约 40px 宽、高约 20px 的等腰三角形 - 方向由哪条 border 非透明决定：上（
border-top）、下（border-bottom）、左（border-left）、右（border-right）
用 clip-path 做更灵活的三角形
如果要等边、直角、带旋转或响应式缩放的三角形，clip-path 更可控。它直接裁剪元素可视区域，不依赖 border 渲染机制，支持坐标描述，也兼容 transform。
使用场景：需要精确角度（比如 60° 等边）、要和文字/图标组合、或三角形需随容器缩放时，clip-path 比 border 方案更稳。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
clip-path: polygon(0% 0%, 100% 0%, 50% 100%)—— 三个顶点坐标，顺序影响填充方向 - 注意单位：百分比基于元素自身宽高，所以父容器尺寸变化时三角形会自适应；用 px 则固定大小
- IE 不支持
clip-path，如需兼容老版本，得回退到 border 方案或 SVG - 可以配合
transform: rotate()微调朝向，不会像 border 方案那样因旋转导致 border 锯齿加重
SVG 是最可靠的选择
当三角形要用于图标、数据可视化、或需要抗锯齿/缩放不失真时，直接写 <svg></svg> 最稳妥。它本质是矢量图形，跟分辨率无关，语义清晰，还能加交互。
容易踩的坑：有人把 SVG 当图片引入（<img src="tri.svg" alt="html中如何弄一个三角形" >），结果无法用 CSS 控制颜色或加 hover 效果；或者内联 SVG 后忘了设 viewBox，导致缩放异常。
- 推荐内联写法：
<svg viewbox="0 0 20 20"><polygon points="10,0 0,20 20,20"></polygon></svg> -
viewBox必须设，否则 SVG 不会按比例缩放；points顺序决定填充方向和是否镂空 - 颜色用
fill属性控制，可直接写fill="currentColor"继承文字色，方便主题切换 - 如果只是装饰性小三角（比如下拉箭头），用 SVG 比 border 多几行代码，但维护性和可访问性明显更好
border 方案看着简单，但一旦要加阴影、动画或适配高倍屏，边缘容易发虚；clip-path 好用但得记坐标顺序；SVG 看似重，其实一个三角形也就三四行。真正复杂的是怎么让三角形在不同上下文里保持视觉一致性——比如按钮里的小箭头，缩放后要不要保持锐度，hover 时要不要变色，这些细节才最花时间。
