如何创建三角形并将其用作工具提示（Tooltip）的箭头？

嘿，手动算像素值调箭头确实太折磨人了——不仅容易出错，后续改尺寸或者换方向时还要重新算一遍，完全不优雅！我给你分享几个更灵活的实现思路，彻底摆脱硬编码的像素值：

方法1：纯CSS三角形+居中变换（最常用方案） #

这个方法利用CSS border的特性生成三角形，再通过transform实现自动居中，完全不用手动计算位置：

改进后的代码 #

<div class="container">
  <!-- 这里放你的Tooltip内容 -->
</div>

/* 用CSS变量统一控制所有尺寸，方便后续修改 */
:root {
  --arrow-size: 15px;       /* 箭头大小 */
  --border-width: 2px;       /* 容器边框宽度 */
  --border-color: #ffffff;   /* 边框颜色 */
  --bg-color: #de302f;       /* 容器背景色 */
}

body { 
  background: var(--bg-color); 
}

.container { 
  position: relative; 
  max-width: 600px; 
  border: var(--border-width) solid var(--border-color); 
  margin: 10px auto; 
  padding: 30px; 
  box-sizing: border-box;
}

/* 外层箭头（边框部分） */
.container:after {
  content: '';
  position: absolute;
  /* 用border生成三角形：只保留左侧边框，上下边框透明 */
  width: 0;
  height: 0;
  border-top: var(--arrow-size) solid transparent;
  border-bottom: var(--arrow-size) solid transparent;
  border-left: var(--arrow-size) solid var(--border-color);
  /* 垂直居中：top:50% 配合 translateY(-50%)，自动适配容器高度 */
  top: 50%;
  right: calc(-1 * var(--arrow-size)); /* 箭头刚好贴在容器右侧 */
  transform: translateY(-50%);
}

/* 内层箭头（填充背景色，避免边框漏出） */
.container:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  /* 比外层箭头小一圈，刚好覆盖容器背景 */
  border-top: calc(var(--arrow-size) - var(--border-width)) solid transparent;
  border-bottom: calc(var(--arrow-size) - var(--border-width)) solid transparent;
  border-left: calc(var(--arrow-size) - var(--border-width)) solid var(--bg-color);
  top: 50%;
  right: calc(-1 * var(--arrow-size) + var(--border-width));
  transform: translateY(-50%);
}

这个方案的优势： #

• 无额外HTML元素：只用容器的伪元素实现，结构更干净
• 自动居中：top:50% + transform: translateY(-50%)实现垂直居中，不管容器高度怎么变，箭头始终居中
• 易于维护：所有尺寸都用CSS变量控制，要改箭头大小或者边框宽度，只需要修改变量值就行
• 灵活适配方向：如果要做顶部/底部/左侧箭头，只需要调整border的方向和定位属性（比如顶部箭头用border-bottom，left:50% + translateX(-50%)）

方法2：用clip-path实现自定义箭头（适合复杂形状） #

如果需要非三角形的箭头（比如圆角箭头），可以用clip-path来裁剪形状，同样配合变换居中：

.container:after {
  content: '';
  position: absolute;
  width: var(--arrow-size);
  height: calc(var(--arrow-size) * 2);
  background: var(--border-color);
  top: 50%;
  right: calc(-1 * var(--arrow-size) / 2);
  transform: translateY(-50%);
  /* 裁剪出带圆角的箭头形状 */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

这种方法适合需要更个性化的箭头样式，同样不需要手动计算像素位置。

内容的提问来源于stack exchange，提问作者HarryP