纯 CSS 三角形怎么画:从 border 技巧到提示框尖角

第一次做下拉箭头时,我习惯性想去切个小图标 PNG。后来发现根本不用:一个空盒子,几行 border,三角形就出来了,还能随文字颜色变,缩放也不糊。这套写法从 IE6 到现在的浏览器全认,体积是零,没有额外的 HTTP 请求。下面把原理、方向控制和最常见的提示框尖角写法一次讲透。

为什么 border 能拼出三角形

关键在浏览器拼接相邻边框的方式。给一个盒子设 width:0、height:0,它本身没有任何面积,四条边框就全部塌缩到中心一点。每条边框沿着 45 度斜接线和左右邻居相接,于是每条边框单独看都是一个三角形楔块。

这时你只给其中一条边上色,其余三条设成 transparent,就只剩一个可见的三角。一旦给盒子任何真实宽高,这些楔块会变回带平直内边的梯形,你得到的就是一个边框,不是三角形了。所以 width:0; height:0 不是可有可无,它正是逼四条边框变成纯三角的前提。

一个真实例子:向上的三角

我直接贴向上三角的 CSS,这是最常用的形状:

.triangle-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #4f46e5;
}

这里有个一定要记住的细节:左右两条侧边是透明的,各设 8px,加起来正好是底边 16px;实色的那条 border-bottom 设 12px,就是三角形的高。两条透明侧边必须各为底边宽度的一半,否则顶点会偏离中线,三角就歪了。换句话说,底边宽 = 左 border + 右 border,高 = 上色那条 border。

方向怎么控制:颜色上在反方向

最容易绕晕的一点:可见的三角指向你上色那条边的反方向。

• 实色底边,三角指向上
• 实色顶边,三角指向下
• 实色左边,三角指向右
• 实色右边,三角指向左

所以箭头如果方向反了,基本就是给错了边上色,把颜色换到对面那条边就行。对角的直角三角形更直接:给一条边上色、相邻那条设透明、对面那对清零,就得到一个直角三角。手算这些值容易错,我一般直接在 CSS 三角形生成器 里选方向、拖尺寸、看实时预览,确认形状对了再复制,省得反复改 border 值试。

提示框尖角的实战写法

提示框(tooltip)需要一个小尾巴从气泡指向触发元素,这是 border 三角最经典的用途。做法是把三角当成 ::after 伪元素贴在气泡上:

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #1f2937;
}

气泡背景设成同一个 #1f2937,尾巴的颜色跟着对齐,看上去就是气泡自然往下伸出一个尖。这里用 border-top 上色,所以尖角朝下,正好指向气泡下方的元素。因为 border 写法没有真实盒子尺寸,这个尾巴绝不会抢走下面内容的指针事件,鼠标照样能点到底下的东西。

同样的思路,聊天气泡把方向换成左或右,就能做出指向头像的尖角;下拉按钮放个朝下的小三角,配 CSS 过渡在展开态旋转 180 度,就是会翻转的箭头。一套写法,换个方向就复用到一堆场景。

border 写法的边界:要填充就换思路

border 三角有个硬限制:元素没有真实的面,只有边框,所以给它设 background 或 background-image 完全看不见。我见过不少人在 border 三角上写 background-color,然后纳闷为什么没反应,原因就在这。

如果你要的是带渐变、带背景图、甚至里面放文字的三角,就得换成 clip-path 写法。那是一个真实的宽 × 高盒子被裁成三角形,盒子尺寸还在,任何背景都会被裁进三角里。想给三角填一段品牌渐变,可以先去 渐变生成器 调好 linear-gradient,再粘到裁切后的盒子背景上,Hero 区斜切、倾斜分割线都靠这招。

小结

纯 CSS 三角形的核心就一句话:width:0; height:0 让四条边框变成三角楔块,给一条上色、其余透明,可见的三角指向上色边的反方向。提示框尖角、下拉箭头、聊天气泡这些场景,border 写法又快又轻;需要填充或动画时再换 clip-path。两种写法配合着用,基本覆盖了前端日常要画的所有三角。

---

Made by Toolora · Updated 2026-06-13