Bootstrap 5：为获焦按钮添加居中三角形指示器

要实现这个效果，我们可以利用CSS伪元素结合Bootstrap已有的焦点状态类来添加三角形指示器，具体实现方案如下：

核心思路 #

通过::before伪元素构建三角形形状，利用绝对定位将其固定在按钮顶部的居中位置，并且仅在按钮处于获焦状态时显示。

具体代码实现 #

首先给按钮添加相对定位作为伪元素的定位容器，然后针对焦点状态的按钮设置伪元素样式：

/* 给按钮添加相对定位，作为伪元素的定位基准 */
.btn-info {
  position: relative;
}

/* 为获焦状态的按钮添加顶部居中三角形 */
.btn-check:focus + .btn-info::before,
.btn-info:focus::before {
  content: "";
  /* 通过边框组合实现向上的三角形 */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #0dcaf0; /* 使用Bootstrap info主题的默认主色，和按钮风格统一 */
  /* 绝对定位到按钮顶部居中位置 */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%); /* 水平居中+向上偏移，刚好贴合按钮顶部 */
  /* 避免伪元素干扰按钮的交互事件 */
  pointer-events: none;
}

代码细节解释 #

• position: relative：给.btn-info设置相对定位，确保伪元素的绝对定位以按钮自身为参照。
• 边框构建三角形：利用左右透明边框、底部有色边框的组合，形成指向向上的三角形（对应你需要的^形状）。
• transform: translateX(-50%)：让伪元素水平方向完全居中，translateY(-100%)保证三角形刚好贴在按钮顶部边缘，不会和按钮内的文字重叠。
• pointer-events: none：防止伪元素遮挡按钮的点击、焦点等交互操作。

完整示例代码 #

将你的HTML和上述CSS结合，就能看到效果了：

<div class="btn-group d-flex">
  <button class="btn btn-info py-4">Sunday</button>
  <button class="btn btn-info py-4">Monday</button>
  <button class="btn btn-info py-4">Tuesday</button>
</div>

<style>
.btn-info {
  position: relative;
}

.btn-check:focus + .btn-info::before,
.btn-info:focus::before {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #0dcaf0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  pointer-events: none;
}
</style>

你可以根据需求调整边框的8px数值来改变三角形的大小，或者修改border-bottom的颜色来匹配你的设计风格。

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