17370845950

用CSS伪元素画三角形的核心原理是：宽高为0时，通过设置三边透明、一边有色的边框，利用边框交界处的斜角视觉错觉形成三角形；口诀为向上用border-bottom、向下用border-top、向左用border-right、向右用border-left。

用 CSS 伪元素（如 ::before 或 ::after）配合 border 属性画三角形，是前端开发中常用且轻量的技巧。核心原理是：当一个元素宽高为 0，仅设置不同方向的边框，且颜色不同时，相邻边框会在交界处形成斜角——利用这个视觉错觉就能“拼出”三角形。

基础原理：0宽高 + 三边透明 + 一边有色

要画一个向下的三角形，关键在于：

• 把元素的 width 和 height 设为 0
• 设置上边框（border-top）为实色，其他三边（border-right、border-bottom、border-left）设为透明或同色但不可见
• 透明边框仍占据空间，与有色边框在对角处交汇，自然形成三角形尖角

常见方向三角形写法（用 ::after 举例）

假设你有一个按钮，想在右侧加一个小箭头三角形：

.btn::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #333; /* 向右的三角形 */
  margin-left: 4px;
}

对应方向口诀：

立即学习“前端免费学习笔记（深入）”；

• 向上：border-bottom 有色，其余透明
• 向下：border-top 有色，其余透明
• 向左：border-right 有色，其余透明
• 向右：border-left 有色，其余透明

用伪元素画三角形的实用要点

实际使用时注意这些细节，避免错位或显示异常：

• 必须声明 content: ''，否则伪元素不会渲染
• 推荐用 display: inline-block 或 block，便于定位和尺寸控制
• 可通过 margin 或 transform: translate() 微调位置，比绝对定位更灵活
• 若需带阴影或旋转，可对伪元素单独加 filter: drop-shadow() 或 transform: rotate()

扩展：画等腰直角三角形或小提示气泡

比如做一个带小尾巴的提示框（tooltip），主框用普通元素，小三角用 ::after 挂在底部居中：

.tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666; /* 向上的小三角，作为气泡尾巴 */
}

此时三角形底边宽度 = 左右透明边框宽度之和（6px + 6px = 12px），高度 = 有色边框宽度（6px），构成标准等腰直角三角形。