当前位置：首页 > CSS

css制作角标

2026-03-31 22:52:00CSS

使用伪元素创建角标

通过CSS的::before或::after伪元素可以轻松创建角标效果。这种方法不需要额外HTML元素，保持代码简洁。

.element {
  position: relative;
  display: inline-block;
  padding: 20px;
}

.element::after {
  content: "NEW";
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  padding: 2px 5px;
  font-size: 12px;
  transform: translate(30%, -30%);
}

绝对定位实现角标

利用绝对定位将角标元素固定在容器的角落。需要为父元素设置position: relative。

<div class="parent">
  <span class="badge">1</span>
</div>

.parent {
  position: relative;
  width: 100px;
  height: 100px;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: blue;
  color: white;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}

使用CSS变换创建特殊形状

通过CSS的transform属性可以创建三角形、圆形等特殊形状的角标。

.corner-ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}

.corner-ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent #ff5252 transparent transparent;
}

响应式角标设计

使用相对单位如vw、em确保角标在不同屏幕尺寸下保持合适比例。

.responsive-badge {
  position: absolute;
  top: 1vw;
  right: 1vw;
  padding: 0.5vw 1vw;
  font-size: 2vw;
  background: #4CAF50;
  color: white;
  border-radius: 50%;
}

动画效果增强

添加CSS动画使角标更引人注目，适合重要通知或促销信息。

css制作角标

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.animated-badge {
  animation: pulse 2s infinite;
  background-color: #ff5722;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

标签: css