如何去除结构型div，仅用CSS实现相同分组背景布局效果

简化后的HTML结构 #

完全移除仅用于布局的.claim_left/.claim_center/.claim_right，用内容标签+状态类实现结构与样式分离：

<div class="claim-status approved">
  <span class="status-label">Approved</span>
  <span class="status-detail">查看详情</span>
  <span class="status-action">操作</span>
</div>
<div class="claim-status declined">
  <span class="status-label">Declined</span>
  <span class="status-detail">查看详情</span>
  <span class="status-action">操作</span>
</div>
<div class="claim-status pending">
  <span class="status-label">Pending</span>
  <span class="status-detail">查看详情</span>
  <span class="status-action">操作</span>
</div>

核心CSS实现代码 #

通过Flex布局、CSS变量和圆角裁剪，完美还原原布局效果：

/* 基础胶囊容器样式 */
.claim-status {
  display: flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px; /* 胶囊圆角 */
  overflow: hidden; /* 裁剪子元素，实现整体胶囊效果 */
  font-size: 14px;
  font-weight: 500;
}

/* 三栏内容块基础样式 */
.claim-status > span {
  padding: 6px 12px;
}

/* 状态颜色变量定义，便于统一维护 */
.approved {
  --left-bg: #d1fae5;
  --center-bg: #065f46;
  --right-bg: #d1fae5;
  --text-color: #065f46;
}

.declined {
  --left-bg: #fee2e2;
  --center-bg: #991b1b;
  --right-bg: #fee2e2;
  --text-color: #991b1b;
}

.pending {
  --left-bg: #fef3c7;
  --center-bg: #92400e;
  --right-bg: #fef3c7;
  --text-color: #92400e;
}

/* 给三栏分别设置背景与圆角 */
.claim-status .status-label {
  background-color: var(--left-bg);
  color: var(--text-color);
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.claim-status .status-detail {
  background-color: var(--center-bg);
  color: #fff; /* 中间栏文字高亮对比 */
}

.claim-status .status-action {
  background-color: var(--right-bg);
  color: var(--text-color);
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

实现说明 #

• 用Flex布局替代嵌套布局div，直接通过内容标签实现三栏并排，完全分离结构与样式
• 利用overflow: hidden配合子元素的圆角，实现整体胶囊的视觉效果，无需额外布局容器
• 通过CSS变量统一管理不同状态的颜色，后续新增或修改状态样式只需调整变量值即可
• 解决你之前尝试的问题：绝对定位+伪元素方案容易出现背景覆盖、圆角裁剪失效的问题，此方案更直观且兼容性更好

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