CSS 三角形生成器，免费

边框小技巧，一个 25 年老的 CSS hack，至今还有效

CSS 三角形技术利用了 CSS 边框绘制算法处理相邻边框的方式。当两个边框在一个角相遇时，它们之间的分界线会以平分该角的角度被画成一条对角线。在普通大小的元素上，角很小，对角线几乎看不见。但如果你把元素的宽度和高度设为 0 并给它较粗的边框，角就会占据整个视觉空间，原本不可见的对角线变成了一个三角形可见的边。把四条边框中的三条设为透明，第四条保留颜色，你就画出了一个朝着远离彩色一侧的方向的三角形。这一技术大约在 2007–2008 年由 Chris Coyier 等人在早期CSS-tricks 文章中被广泛记录；从那时起，它一直是 Web 设计师工具箱里的常备项，因为它能产生一个清晰、可缩放、可十六进制上色的形状，无需 SVG，无需 PNG，无需额外 HTTP 请求，也无需复杂 CSS。其数学很简单但反直觉（三角形的高等于彩色一侧的边框宽度；它的底等于相邻透明一侧边框宽度的两倍）。本生成器替你处理这些计算，你拖动滑块即可，无需亲自计算边框宽度。

现代替代方案，clip-path、SVG、conic-gradient

2026 年，边框技巧三角形有了竞争对手。CSS clip-path 配合 polygon() 函数（CSS Masking Module Level 1，自 2017 年起成为基线浏览器支持）让你可以把任何元素裁剪成任意多边形：clip-path: polygon(50% 0, 100% 100%, 0 100%) 会在任何元素上画出一个朝上的三角形。clip-path 更灵活（可以有任意数量的顶点，不止三个；可作用于任何带内容的元素，不仅是空 div），与变换和动画组合得更好，并通过较新的 shape() 函数支持圆角。内联 SVG（<svg><polygon points="50,0 100,100 0,100"/></svg>）给予你最多控制，描边、填充、渐变、通过 SMIL 或 CSS 动画、通过 <title> 元素提供可访问性。conic-gradient 通过巧妙放置的颜色停止点也能产生三角形形状，但更像是好奇心实验而非实用模式。在简单装饰场景（提示框指针、下拉箭头、对话气泡尾巴）中，边框技巧三角形仍是正确选择，因为这里简洁与零开销比灵活性更重要；当三角形是更复杂形状的一部分、需要把文本放进去，或者设计可能需要圆角时，clip-path 更合适。

CSS 三角形真正出力的地方

• 提示框和气泡指针。把提示框气泡连接到其锚点元素的小三角形是最常见的用例，你可以把它构建为提示框上的 CSS 三角形伪元素（::before 或 ::after），定位在朝向锚点的那条边上。
• 对话气泡尾巴。聊天消息气泡、评论卡片和引用旁注上尖尖的尾巴。和提示框指针同样的技术，只是更大些，并按气泡的背景颜色设计样式。
• 下拉箭头指示符。选择框和下拉菜单按钮里向下的小三角形。原生 <select> 元素带有 OS 风格的箭头；用 <button> + popover 自定义的下拉菜单则需要自己的。
• 手风琴展开/折叠指示符。点击手风琴某节时在向右（折叠）和向下（展开）之间翻转的三角形。用 CSS rotate 变换做动画。
• 面包屑分隔符。面包屑链接之间向右的三角形。常用 ::before 构建为 CSS 三角形。
• 横幅与缎带装饰。促销横幅或标签末端的三角缺口，「新」徽章上的角落折叠，Hero 区底部指向下方提示滚动的雪佛龙。都是单色三角形，都是边框小技巧。
• 装饰性分割。一排小三角形作为节段分隔符、几何图案叠加、复古风格的点缀。

可访问性考量

CSS 三角形是纯视觉装饰，它们没有语义含义，在可访问性树中也无存在感。屏幕阅读器不会朗读它们。对于纯装饰用途（对话气泡尾巴、面包屑分隔符）这是正确行为。对于传达含义的三角形（指向当前节段的箭头、表示「点击查看更多」的下拉箭头），含义需要通过其他途径传达：下拉触发器上的 aria-expanded 属性、可见的文字标签、按钮上的 aria-label。不要依赖 CSS 三角形来传达状态；把它当作通过其他属性以语义方式传达的状态的视觉强化。CSS ::before 和 ::after 伪元素的内容通常不会被屏幕阅读器朗读，这对装饰性形状来说正合适。

本生成器产出的三角形类型

• 上 / 下，指向上或下的等腰三角形，提示框和手风琴指示符最常见的形状。
• 左 / 右，指向左或右，用于面包屑和右栏旁注。
• 左上 / 右上 角，能契合容器元素角部的直角三角形。用于缎带折叠和角部徽章效果。
• 左下 / 右下 角，用于相反角的直角三角形。
• 自定义比例，可调的宽高比，用于非等边形状，适合需要高而窄的指针或宽而扁的雪佛龙时。

相关工具