如何在div评分卡片上实现边角对齐的CSS角标，解决定位偏移问题

解决方案 #

原实现的问题在于未对卡片超出内容做裁剪，且角标旋转偏移逻辑不合理，无固定定位基准，适配性差。

核心修改点 #

• 给父级卡片容器添加overflow: hidden，自动裁剪超出卡片边界的角标内容，自然贴合边缘
• 调整角标的定位起点与旋转参数，取消不合理的固定Y轴偏移
• 固定角标宽度，避免文字长度变化导致对齐失效

完整CSS代码 #

.project-card {
  height: 350px;
  width: 300px;
  background-color: blue;
  position: relative;
  overflow: hidden;
}
.achievement-label {
  position: absolute;
  background-color: red;
  padding: 0.3rem 0;
  width: 160px;
  text-align: center;
  left: -42px;
  top: 24px;
  transform: rotate(-45deg);
  /* 若需要保留原有的斜切效果，可取消下一行注释 */
  /* clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); */
}

调整规则 #

如果需要适配不同尺寸的角标，可按以下规则修改参数：

• 增大width值可延长角标长度
• 增大left的负值可让角标更往左侧偏移
• 增大top值可让角标往卡片下方移动
• 若要实现右上角角标，将left改为right，旋转角度改为rotate(45deg)即可

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