如何实现ngx-bootstrap tooltip箭头的同形状边框？现有CSS效果不符

你当前的CSS写法没法实现箭头形状的边框，因为ngx-bootstrap的tooltip箭头是靠单方向border生成的三角形，直接给.arrow::before加border会让整个伪元素的边框显示，不是三角形的边框。

要实现箭头和边框形状一致的效果，得用伪元素叠加的思路：用一个稍大的箭头（边框颜色）当底层，再用一个稍小的同方向箭头（和tooltip背景同色）覆盖在上面，模拟出边框效果。

修改后的CSS代码（适配所有方向的tooltip） #

.customClass .tooltip-inner {
  border: 2px solid white !important;
  background-color: #fff; /* 确保内容区背景和箭头主体一致 */
}

/* 顶部箭头 - 边框层 */
.customClass.tooltip.top .arrow::before {
  border-top-color: #ccc;
  border-width: 8px; /* 箭头基础大小 */
}
/* 顶部箭头 - 主体层（覆盖边框层） */
.customClass.tooltip.top .arrow::after {
  content: '';
  position: absolute;
  top: -7px; /* 比边框层小1px，偏移对齐 */
  left: -7px;
  border-top-color: #fff;
  border-width: 7px;
  border-style: solid;
}

/* 底部箭头 */
.customClass.tooltip.bottom .arrow::before {
  border-bottom-color: #ccc;
  border-width: 8px;
}
.customClass.tooltip.bottom .arrow::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: -7px;
  border-bottom-color: #fff;
  border-width: 7px;
  border-style: solid;
}

/* 左侧箭头 */
.customClass.tooltip.left .arrow::before {
  border-left-color: #ccc;
  border-width: 8px;
}
.customClass.tooltip.left .arrow::after {
  content: '';
  position: absolute;
  left: -7px;
  top: -7px;
  border-left-color: #fff;
  border-width: 7px;
  border-style: solid;
}

/* 右侧箭头 */
.customClass.tooltip.right .arrow::before {
  border-right-color: #ccc;
  border-width: 8px;
}
.customClass.tooltip.right .arrow::after {
  content: '';
  position: absolute;
  right: -7px;
  top: -7px;
  border-right-color: #fff;
  border-width: 7px;
  border-style: solid;
}

原理说明 #

1. 底层的.arrow::before负责显示边框颜色，箭头尺寸稍大
2. 新增的.arrow::after是和tooltip背景同色的小箭头，覆盖在底层箭头上面，只露出底层箭头的边缘部分，刚好形成匹配箭头形状的边框
3. 不同方向的tooltip需要单独调整箭头的border方向和伪元素偏移位置，确保对齐正确

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