HTML怎么做三角形_html CSS画三角形的几种方法【最全】-html教程-PHP中文网

纯 css 可用 border 实现单色实心三角形：宽高为 0，仅保留一个方向的有色 border，其余三边 transparent；clip-path 适合任意形状但兼容性受限；伪元素更轻量；svg 最健壮且支持无障碍。

html怎么做三角形_html css画三角形的几种方法【最全】

纯 CSS 就能画三角形，不需要图片、SVG 或 Canvas —— 关键是利用 border 的渲染特性，配合 transparent 边框和尺寸控制。

用 `border` 实现单色实心三角形

这是最常用、最轻量的方法：把元素宽高设为 0，只保留一个方向的 border（比如 border-bottom），其余三边设为 transparent，浏览器会自动把 border 交界处渲染成斜边，形成三角形。

常见错误现象：border 值写成相同颜色、没清空其他三边、忘了设 width: 0; height: 0;，结果画出的是梯形或矩形块。

向下箭头（底边朝下）：border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #333;
向右箭头（右边朝右）：border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #333;
大小由 border 宽度决定；角度由左右/上下 border 宽度比控制（等宽 = 等腰直角）

用 `clip-path` 绘制任意方向、带圆角或非等腰三角形

clip-path 更灵活，适合需要精确坐标、非直角、或响应式缩放的场景，但 IE 不支持，移动端需注意 Safari 兼容性（clip-path: polygon() 在 iOS 15.4+ 才稳定）。

使用场景：图标按钮中的斜角标签、数据可视化里的自定义形状、需要 CSS 动画旋转的三角指示器。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

正三角形（顶点朝上）：clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
带圆角的三角形：先用 clip-path 切出三角，再加 border-radius（仅对部分圆角生效，更可靠的做法是用 path() 配合 SVG clipPath）
性能影响：频繁动画 clip-path 可能触发重排，建议加 will-change: clip-path; 或用 transform 替代

用伪元素 `::before`/`::after` 避免额外 DOM 节点

多数实际项目里，三角形只是装饰（如气泡框的小尖角、下拉菜单指示符），直接挂载在目标元素上最干净。伪元素天然满足“零 DOM 开销”，且可继承父级颜色、字体等样式。

容易踩的坑：position: absolute 后没给父容器设 position: relative，导致定位错乱；或忘了设置 content: ""，伪元素不渲染。

气泡框右下角小三角（指向右侧）：

.bubble::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -6px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #666;
}

颜色同步技巧：用 border-left-color: currentColor;，让三角随文本色自动变色
不能用伪元素实现 clip-path 动画（部分浏览器不支持伪元素的 clip-path 过渡）

用 SVG 内联替代方案：兼顾语义、缩放与可访问性

当三角形需要被屏幕阅读器识别、或必须高清缩放（如打印样式）、或要配合 JS 动态计算坐标时，内联 SVG 是更健壮的选择。体积略大，但无兼容性焦虑，CSS 也能控制其 fill/stroke。

关键细节：别漏掉 viewBox，否则缩放失真；width/height 设为 1em 或百分比才能响应式；若作图标，加 aria-hidden="true" 或 role="img"。

简单右向三角：

<svg width="1em" height="1em" viewbox="0 0 10 10"><polygon points="0,0 10,5 0,10" fill="#333"></polygon></svg>

和文字行高对齐：用 vertical-align: middle; 或 display: inline-flex; 包裹
不能用 CSS transform: rotate() 精确控制 SVG 内部 <polygon></polygon>，应直接改 points 属性或整体 rotate SVG 元素

border 法够用就别上 clip-path 或 SVG，但一旦涉及非等腰、动态尺寸、或需要无障碍支持，就得切换方案。最容易被忽略的是：所有方法都依赖盒模型行为，如果父容器有 overflow: hidden 或 transform 层叠上下文，可能意外裁剪三角形尖端。