css左上角热销标签

在网页设计中，热销标签是为了突出特定的商品或服务，帮助用户快速找到目标。其中，左上角热销标签是最经典的一种。那么，如何用CSS实现这种标签呢？下面介绍一下具体的方法。

.hot {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-45deg);
  text-align: center;
  padding: 5px 20px;
  background-color: #f44336;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

首先，在CSS中选择热销标签的类名"hot"，使用"position: absolute"将标签定位到页面的左上角。然后，使用"top: 0"和"left: 0"设置标签的位置。此外，通过"transform: rotate(-45deg)"使标签旋转（逆时针方向）45度，以达到斜角的效果。

为了使标签内容垂直居中，我们使用"text-align: center"和"padding: 5px 20px"对文本进行居中和内边距设置。"background-color: #f44336"和"color: white"用于设置标签的背景色和文本颜色，这里使用了鲜艳的红色，使标签更加醒目。另外，"font-weight: bold"和"font-size: 16px"可加粗文本并设置字体大小。

最后，在HTML代码中添加

热销

这样的标签，和对应的CSS代码即可实现左上角热销标签。