如何制作一个带有箭头的溢流水平卡片？(使用Bootstrap 4.5)

<div class="card">
  <!-- 卡片内容 -->
</div>

<div class="card">
  <div class="card-body">
    <!-- 卡片内容 -->
  </div>
</div>

<div class="card">
  <div class="card-body overflow-auto">
    <!-- 卡片内容 -->
  </div>
</div>

<div class="card position-relative">
  <div class="card-body overflow-auto">
    <!-- 卡片内容 -->
  </div>
</div>

.card.position-relative::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border: solid transparent;
  border-width: 10px;
  border-right-color: #000;
  transform: translateY(-50%);
}