HTML DIV左上角徽章状元素的技术术语及实现咨询

你要找的这种盒子左上角的促销文字标注，通常被称为角标（Corner Tag/Label）或促销徽章（Promotion Badge），如果是带飘带样式的也叫飘带标（Ribbon Badge）。

下面是结合你现有代码的实现示例：

HTML 结构 #

<div id="my-box">
  <div class="corner-badge">限时特惠</div>
  盒子内容
</div>

完整 CSS 代码 #

#my-box {
  padding: 20px;
  margin: 20px;
  border: #212121 3px solid;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
  position: relative; /* 新增：让子元素绝对定位以它为基准 */
}

/* 基础角标样式 */
.corner-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background: #ff5722;
  color: #fff;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 可选：星形角标样式 */
.corner-badge.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  padding: 6px;
  font-size: 10px;
}

说明 #

1. 给父盒子#my-box添加position: relative，确保角标可以相对于它定位
2. 通过position: absolute将角标固定在左上角，用top和left调整偏移量，让部分角标"溢出"盒子
3. 可以通过修改background、border-radius或clip-path来实现气泡、星形等不同形状

内容的提问来源于stack exchange，提问作者Aquaholic