如何基于Bootstrap 5开发带顶部三角形指示器的标签组件

你可以通过CSS伪元素配合边框特性实现顶部三角形效果，不需要新增额外DOM节点，具体实现如下：

实现原理 #

宽高为0的块元素，将不需要的方向边框设为透明，仅保留目标方向的边框实色，即可得到对应方向的三角形。搭配绝对定位就能固定到容器顶部的指定位置。

完整代码示例 #

CSS 样式 #

/* 外层容器配置 */
.col-12 {
  position: relative;
  display: flex;
  width: fit-content;
  margin-top: 10px; /* 预留三角形显示空间，可按需调整 */
}
/* 标签子项公共样式 */
.col-12 > div {
  padding: 6px 12px;
  line-height: 1.4;
}
.col-3 {
  color: #fff;
}
/* 三角形指示器样式 */
.col-12::before {
  content: "";
  position: absolute;
  top: -8px; /* 数值等于边框宽度，控制三角形在容器上方的位置 */
  left: 12.5%; /* 调整该值让三角形对齐深色区域中心，可按需修改 */
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-bottom-color: #212529; /* 和深色块背景色保持一致 */
}

HTML 结构（和你原有结构一致） #

<div class="col-12">
  <div class="col-3 bg-dark"> x4 </div>
  <div class="col-9 bg-white"> 75€ </div>
</div>

自定义调整说明 #

• 如果需要三角形对齐右侧白色区域，将left改为75%，border-bottom-color改为#fff即可
• 调整border的数值可以修改三角形的大小
• 调整top的数值可以修改三角形和标签主体的间距

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