如何实现文本嵌入半胶囊形状容器？附胶囊样式代码示例

你提供的代码使用了Bootstrap的rounded-pill类，这个类会将元素渲染为完整的胶囊形状（左右两端均为半圆）。如果要实现半胶囊形状，可以通过自定义CSS调整圆角属性，只保留单侧的半圆效果，另一端设为直角。

具体实现方法 #

方案1：纯自定义CSS实现 #

不依赖Bootstrap预设类，直接编写CSS控制样式：

<style>
/* 左侧半圆的半胶囊样式 */
.half-pill-left {
  background-color: #0d6efd; /* 对应Bootstrap的bg-primary主题色 */
  border-radius: 50px 0 0 50px; /* 仅设置左上、左下为半圆圆角 */
  padding: 12px 24px;
}
/* 右侧半圆的半胶囊样式 */
.half-pill-right {
  background-color: #0d6efd;
  border-radius: 0 50px 50px 0; /* 仅设置右上、右下为半圆圆角 */
  padding: 12px 24px;
}
.text-right {
  margin: 6px 0;
  color: #fff; /* 搭配深色背景使用白色文字，提升可读性 */
}
</style>

<!-- 左侧半胶囊示例 -->
<div class="half-pill-left">
  <p class="text-right">TOTAL AMOUNT</p>
  <p class="text-right">200</p>
</div>

<!-- 右侧半胶囊示例 -->
<div class="half-pill-right">
  <p class="text-right">TOTAL AMOUNT</p>
  <p class="text-right">200</p>
</div>

方案2：基于Bootstrap扩展样式 #

如果继续使用Bootstrap框架，可以叠加自定义类覆盖原有圆角：

<style>
.half-pill-right {
  border-radius: 0 var(--bs-border-radius-pill) var(--bs-border-radius-pill) 0 !important;
}
.half-pill-left {
  border-radius: var(--bs-border-radius-pill) 0 0 var(--bs-border-radius-pill) !important;
}
</style>

<div class="bg-primary half-pill-right text-white p-3">
  <p class="text-right mb-1">TOTAL AMOUNT</p>
  <p class="text-right mb-0">200</p>
</div>

关键提示 #

• 半胶囊的核心是单边圆角设置，圆角半径建议设置为容器高度的一半（或使用足够大的固定值，比如50px），确保呈现标准的半圆效果。
• 必须给容器添加内边距（padding），避免文本紧贴容器边缘，保证视觉美观。

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