CSS 三角形生成器

生成的 CSS 怎么读

生成的规则始终以 width: 0 和 height: 0 开始，元素没有内容区，整个盒子都由边框组成。上、右、下、左四个方向各用三条边框：两条透明边框合起来就是底边的长度，一条实色边框的宽度就是三角形的高。四个角方向只用两条边框：一条实色、一条透明，从矩形的一角切出一个直角三角形。复制后把 .triangle 换成自己的类名即可。

聊天气泡的小箭头

聊天界面里，对方的消息通常靠左、气泡上有一个朝左的小箭头，自己的消息靠右、箭头朝右。先做对方那一侧：方向选「左」，宽度 8、高度 12，颜色填气泡的白色 #ffffff：

.triangle {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #ffffff;
}

高度 12 被平分成上下两条 6px 的透明边框，右边框 8px 是箭头伸出的长度。自己那一侧方向选「右」，尺寸不变，颜色换成绿色 #95ec69：

.triangle {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #95ec69;
}

实际使用时不必多写一个 div，把这些声明放进气泡的伪元素，再用绝对定位挂到气泡外侧。箭头宽 8px，所以向左移出 8px：

.bubble-left {
  position: relative;
  background: #ffffff;
}
.bubble-left::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #ffffff;
}

右侧气泡同理，用 right: -8px 和朝右的那组边框。

奇数尺寸会让尖角偏半个像素

上一节如果把高度改成 13，两条透明边框就不能平分：工具按向下取整和向上取整拆成 6px 和 7px，两者之和仍是 13px，但尖角比正中偏上 0.5px。

.triangle {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 8px solid #95ec69;
}

写成两条 6.5px 也没有用：浏览器会把边框宽度向下取整到整数个设备像素（CSS Backgrounds and Borders Level 3），在普通屏幕上底边会变成 12px。需要尖角正好居中时，上下方向用偶数宽度，左右方向用偶数高度。

全角字符不会改变颜色

颜色文本框只认 # 加六位半角十六进制。中文输入法全角状态下打出的 ＃ｆｆｆｆｆｆ 不符合格式，状态行会显示格式提示，颜色不变，CSS 里仍是原来的颜色。下面是默认颜色 #3b82f6 时，方向「右」、宽 8、高 12，输入全角白色之后的输出：

.triangle {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #3b82f6;
}

如果复制出的颜色和预期不符，先检查文本框里的 # 和字母是不是全角。

限制

• 只有一种纯色。 一条边框只有一个颜色，做不出渐变、图片填充、描边，也没有沿斜边的 box-shadow。需要这些效果时，用 clip-path 生成器的 clip-path: polygon(50% 0, 100% 100%, 0 100%) 裁出形状。
• 尺寸为 1 到 500 之间的整数像素。 宽度或高度为空、为 0、为负数、带小数或超过 500 时，生成的 CSS 下方显示错误，CSS 和预览清空，改回有效值后恢复。
• 只能用像素。 边框宽度不能写百分比，所以边框三角形不会随容器缩放。
• 颜色只接受 # 加六位十六进制。 三位或八位的码、颜色名和 rgba() 都会保留原颜色并显示提示。想用 currentColor 或 CSS 变量，复制后自己改。
• HTML 片段固定为 <div class="triangle"></div>。 只起装饰作用的三角形对读屏软件没有意义；如果它是唯一表示状态的标记（比如展开箭头），状态还要写在文字或 aria-expanded 里。

常见使用场景

CSS 三角形常用于工具提示箭头、下拉菜单指示符、面包屑分隔符和聊天气泡的尾部。它只是几条边框，不用加载图片，颜色也能用 CSS 变量随主题切换。