跳到主要内容

用纯 CSS 创建一个三角形的原理是什么

面试速答（30 秒版 TL;DR）​

  • 经典做法：把元素设为 width: 0; height: 0;，再设置四个方向的 border。
  • 边框本质是“梯形/三角形拼出来的区域”：当盒子宽高为 0 时，四个边框在角上相交，视觉上就是三角形。
  • 让其中三条边透明（transparent），只保留一条边有颜色，就得到指向对应方向的三角形。

原理讲清楚（面试怎么说）​

你可以这样解释：

  • border 不是一条线，而是有宽度的区域。
  • 当元素 width/height 为 0，边框区域会在中心点“汇合”，每条边框看起来就是一个三角形。

代码模板（四个方向）​

通用底座：

.tri {
  width: 0;
  height: 0;
  border-style: solid;
}

向上（三角尖朝上，颜色在 border-bottom）：

.tri-up {
  border-width: 0 10px 14px 10px;
  border-color: transparent transparent #333 transparent;
}

向下（颜色在 border-top）：

.tri-down {
  border-width: 14px 10px 0 10px;
  border-color: #333 transparent transparent transparent;
}

向左（颜色在 border-right）：

.tri-left {
  border-width: 10px 14px 10px 0;
  border-color: transparent #333 transparent transparent;
}

向右（颜色在 border-left）：

.tri-right {
  border-width: 10px 0 10px 14px;
  border-color: transparent transparent transparent #333;
}

典型应用：气泡/Tooltip 箭头​

.tooltip {
  position: relative;
  padding: 8px 10px;
  background: #333;
  color: #fff;
  border-radius: 6px;
}

.tooltip::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #333 transparent transparent transparent;
}

典型题 & 标准答法​

Q1：为什么三角形能出来？“哪一条边”决定方向？​

答：因为 0x0 盒子的边框区域会形成四个三角形；哪条边有颜色，就显示哪一侧的三角形，指向与它相对的方向（例如 border-bottom 有颜色，三角尖朝上）。

Q2：除了 border，还有别的画三角形方式吗？​

答：有，例如 clip-path: polygon(...)、SVG、或用旋转的正方形（45 度）等；border 三角形胜在简单与兼容性好。

易错点/坑​

  • 颜色/背景不一致：tooltip 箭头颜色要和气泡背景一致，否则有“接缝”。
  • 抗锯齿与半像素：在某些缩放/高 DPI 下边缘可能发虚。
  • 三角形大小由 border-width 决定：更改要成对调整，否则会变形。

速记要点（可背诵）​

  • 0 宽高 + 边框；三边透明、一边有色 = 三角形；方向由“哪条边有色”决定。