CSS3 角标代码示例 - 如何创建带三角形的角标

角标可以通过 CSS3 实现，以下是一段示例代码：

HTML：

<div class='badge'>New</div>

CSS：

.badge {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  background-color: #f44336;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.badge::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-color: transparent #f44336 transparent transparent;
}

解释：

• '.badge' 是角标的容器，使用 'position: relative' 以便后面的伪元素定位。
• '::after' 是伪元素，用来绘制三角形，使用 'position: absolute' 相对于 '.badge' 定位，'top: 0' 和 'right: 0' 将三角形放在右上角。
• 'border-style: solid' 表示边框为实线，'border-width' 定义边框宽度，'border-color' 定义边框颜色，使用透明色和背景色配合，实现三角形的效果。

效果如下：