如何为卡片区块添加侧边丝带样式及「Completed」状态标识

首先需要重构你的HTML结构，把每个课程单独封装成卡片容器，这样才能方便添加状态标识和丝带样式：

<div class="course-container">
  <!-- 已完成的课程卡片 -->
  <div class="course-card completed">
    <img src="./PCIBT - Pacific Coast Institute of Business & Technology_files/marketing_essentials.jpg" alt="Marketing Essentials">
    <a href="#">Marketing Essentials</a>
  </div>
  <div class="course-card">
    <img src="./PCIBT - Pacific Coast Institute of Business & Technology_files/human_resource_tile_pic.jpg" alt="Human Resource Management">
    <a href="#">Human Resource Management</a>
  </div>
  <div class="course-card completed">
    <img src="./PCIBT - Pacific Coast Institute of Business & Technology_files/pm_fundamentals.jpg" alt="Project Management Fundamentals">
    <a href="#">Project Management Fundamentals</a>
  </div>
</div>

接下来添加CSS样式，实现「Completed」标识和侧边丝带效果：

/* 外层容器保持弹性布局 */
.course-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 给卡片之间加间距 */
}

/* 卡片基础样式 */
.course-card {
  position: relative;
  width: 300px; /* 可根据需求调整宽度 */
  text-align: center;
  border-radius: 8px;
  overflow: hidden; /* 裁剪溢出的丝带部分 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.course-card img {
  width: 100%;
  height: auto;
  display: block;
}

.course-card a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: #333;
  background-color: #fff;
}

/* Completed状态标识 */
.completed::before {
  content: "Completed";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 12px;
  background-color: #28a745;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

/* 侧边丝带样式 */
.completed::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background-color: rgba(40, 167, 69, 0.15); /* 浅绿底色 */
  border-left: 4px solid #28a745; /* 左侧深色条带 */
  /* 可选：添加倾斜效果 */
  transform: skewX(-10deg);
  transform-origin: top left;
}

关键说明： #

• 给需要标记为已完成的卡片添加completed类，通过伪元素生成「Completed」标识和侧边丝带
• 用position: relative让卡片成为伪元素的定位容器，overflow: hidden确保丝带不会超出卡片范围
• 丝带的倾斜效果通过transform: skewX()实现，颜色和尺寸可根据需求调整

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