HTML5画三角形教程详解

本文深入解析了在网页中绘制三角形的三大主流方案——兼容性最佳的CSS border法、更灵活现代的clip-path方案，以及精准可交互的SVG方案，指出border法虽原理简单（宽高为0、三边透明、单边着色），却是最可靠轻量的选择；clip-path适合需要响应式缩放或非标准形状的场景；而SVG则在图标、动画和高保真需求下无可替代；同时明确提醒避免滥用canvas绘制静态三角形，并一针见血地总结：选方案只需回答两个问题——是否需支持老IE？是否需响应式或动画？——帮你绕过90%的常见坑。

用 CSS border 画三角形最常用也最可靠

纯 HTML 标签本身没有“三角形”语义，所有三角形都是靠 CSS 技巧模拟出来的。border 是最主流、兼容性最好、性能最轻量的方式，原理是利用边框交汇处的斜角特性——把其他三边设为透明，只留一边有颜色，就能挤出一个三角形。

常见错误现象：元素看不见、三角形方向反了、大小失控，基本都因为没清空宽高或 border 宽度设得不一致。

• 必须把 width 和 height 都设为 0
• 只保留一个方向的 border 有颜色，其余三个方向设为 transparent（不能用 none）
• 三角形大小由对应方向的 border-width 决定；比如要向下指的三角形，就调 border-top 的宽度
• IE8+ 全支持，不需要前缀

div.triangle-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #333;
}

用 clip-path 实现更灵活的三角形（现代方案）

clip-path 能直接定义任意多边形形状，画三角形更直观，但兼容性不如 border 方案。适合需要旋转、响应式缩放、或非等腰三角形的场景。

容易踩的坑：clip-path: polygon() 坐标是相对于元素盒模型的百分比或像素值，如果父容器没设 position: relative，又用了绝对定位子元素，坐标容易偏移；另外 Safari 旧版本对 clip-path 的 inset() 支持不全，但 polygon() 没问题。

• 推荐用 clip-path: polygon(0% 0%, 100% 0%, 50% 100%) 画正三角形
• 坐标顺序影响渲染方向，顺时针写更稳妥
• 配合 transform: scale() 可无损缩放，而 border 方案缩放会模糊
• Chrome/Firefox/Edge 90+、Safari 15.4+ 原生支持，无需前缀

div.triangle-up {
  width: 100px;
  height: 100px;
  background: #333;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

SVG 三角形：精准、可交互、适合图标和动画

如果三角形要参与点击、hover、CSS 动画，或者需要抗锯齿、高清缩放（比如 retina 屏）， 是最稳的选择。它本质是矢量图形，不是“骗”出来的视觉效果。

使用场景：UI 图标、加载指示器、数据可视化中的标记点、带描边/渐变的三角形。

• 用 最简洁，三点坐标按顺时针或逆时针排列都行
• 不要漏掉 viewBox，否则在不同尺寸容器里可能显示异常
• 内联 SVG 可以直接用 CSS 控制 fill、stroke，也能加 :hover 类名
• 注意 默认是 inline 元素，需要 display: block 或 vertical-align 来对齐

<svg viewBox="0 0 100 100" width="50" height="50">
  <polygon points="50,0 100,100 0,100" fill="#333"/>
</svg>

别用 canvas 画静态三角形——除非你真需要动态生成

的 drawPath / fillTriangle 确实能画，但它属于“运行时绘制”，对 SEO、可访问性、样式控制都不友好。静态三角形用 canvas 就像用锤子钉螺丝——能动，但没必要。

真正该用 canvas 的时候：三角形顶点坐标每帧变化（比如粒子系统）、要叠加滤镜、或批量绘制成百上千个三角形且需高性能。

• 静态图用 canvas 会导致无法被屏幕阅读器识别，也无法被 CSS 选择器选中
• 修改颜色/大小必须重绘整个 canvas，而 CSS 方案改一个属性就行
• 导出为图片时 canvas 更方便，但这不属于“写出来”的范畴

终于介绍完啦！小伙伴们，这篇关于《HTML5画三角形教程详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！