如何用CSS实现文件夹标签形状？现有代码边框效果不符求修正

云上老周

2026-7-5

实现文件夹标签形状的Div解决方案

你要实现的文件夹标签效果，核心是处理卡片边框与标签的衔接问题。你的现有代码缺少边框设置，且标签的形状没有和卡片边框匹配，以下是修正后的代码：

修正后的代码

HTML

<div class="card">
  <div class="header"></div>
  <!-- 可在此添加卡片内容 -->
</div>

CSS

.card {
  background-color: rgb(237, 241, 244);
  position: relative;
  border-radius: 12px;
  width: 300px;
  height: 450px;
  border: 1px solid #cccccc; /* 给卡片添加边框 */
  padding-top: 20px; /* 预留标签高度，避免内容被遮挡 */
  box-sizing: border-box; /* 确保padding不影响整体尺寸 */
}

.header {
  position: absolute;
  top: 0;
  right: 38px;
  border-radius: 8px 8px 0 0; /* 仅保留顶部两个圆角 */
  height: 20px;
  width: 100px;
  background-color: white;
  border: 1px solid #cccccc; /* 标签添加与卡片一致的边框 */
  border-bottom: none; /* 移除标签底部边框，与卡片衔接 */
}

/* 制作标签右侧的边框斜角 */
.header::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #cccccc;
}

/* 用卡片背景色覆盖斜角内部，形成缺口效果 */
.header::before {
  content: '';
  position: absolute;
  right: -9px;
  top: 1px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid rgb(237, 241, 244);
}