css制作角标

使用伪元素创建角标

通过 ::before 或 ::after 伪元素生成角标，结合绝对定位调整位置。示例代码：

.element {
  position: relative;
  display: inline-block;
}
.element::after {
  content: "NEW";
  position: absolute;
  top: -8px;
  right: -12px;
  font-size: 10px;
  background: red;
  color: white;
  padding: 2px 5px;
  border-radius: 50%;
}

利用边框实现三角形角标

通过透明边框和实色边框组合生成三角形角标：

.corner-tag {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #ff4757;
  border-right-color: #ff4757;
  position: absolute;
  top: 0;
  right: 0;
}

旋转文本角标

将文本旋转45度作为装饰性角标：

.rotated-badge {
  position: absolute;
  top: 15px;
  right: -20px;
  background: #2ed573;
  color: white;
  padding: 2px 30px;
  transform: rotate(45deg);
  font-size: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

使用CSS变量动态控制

通过CSS变量实现角标内容动态化：

:root {
  --badge-content: "HOT";
}
.dynamic-badge::before {
  content: var(--badge-content);
  /* 其他样式 */
}

响应式角标处理

添加媒体查询确保小屏幕上角标可见：

@media (max-width: 768px) {
  .responsive-badge {
    font-size: 8px;
    padding: 1px 3px;
    top: -5px;
    right: -8px;
  }
}