css 卡片角标怎么不用额外标签实现_利用 before 伪元素生成角标_网络技术

css 卡片角标怎么不用额外标签实现_利用 before 伪元素生成角标

发布时间 - 2026-01-28 00:00:00 点击率：次

纯CSS角标可用::before实现，关键在于父容器设position: relative、::before设absolute定位及border三角或宽高矩形技巧，并注意z-index、pointer-events及样式继承问题。

用 `::before` 伪元素画角标，核心是定位 + 边框三角技巧

纯 CSS 角标不依赖额外 HTML 标签完全可行，关键是把 ::before 当成一个独立可绘图的“小画布”。它默认是行内级、无尺寸，所以必须显式设置 content（哪怕为空）、position: absolute，再结合 border 技巧生成三角形或矩形角标。

`position: absolute` 的父容器必须设 `position: relative`

否则 ::before 会相对于最近的定位祖先或 viewport 定位，导致角标飘走。卡片容器没加 position: relative 是最常见的失效原因。

卡片元素（如 .card）需声明 position: relative
::before 内部用 top/right 精确控制偏移，例如右上角： top: 8px; right: 8px;
避免用 transform: translate() 做微调——它可能影响点击热区或动画表现

三角形角标用 `border` 技巧，矩形角标直接设宽高

三角形靠 border 颜色叠加实现，只留一个方向有颜色、其余 transparent；矩形更简单，但要注意字体大小和行高对齐。

.card {
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ff4757;
}

若要带文字的矩形角标（如 “NEW”），改用：

.card::before {
  content: "NEW";
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ff4757;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 2px;
}