Css实现角标效果

作者：System 时间：2024年08月23日分类：所有,css 字数：665

CSS实现角标效果可以通过使用伪元素和CSS的定位属性来实现。以下是一个简单的例子，展示了如何使用CSS创建一个角标效果：

HTML:




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

CSS:




.badge {
  position: relative;
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 12px;
}
 
.badge::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #f44336 transparent transparent transparent;
}

这段代码会创建一个圆形的角标，并且角标的右下角会有一个三角形指向元素的顶部。通过调整.badge::after伪元素的border-width和border-color属性，可以自定义三角形的大小和颜色。

Css实现角标效果

评论已关闭

推荐阅读