css实现角标效果+使用text-transfrom实现字母大小

1.text-transform属性

1.1 text-transform:none 默认，定义带有小写字母和大写字母的标准文本
1.2 text-transform:capitalize 文本中的每个单词以大写字母开头（只有字母开头为大写，别的不管）
1.3 text-transform:lowercase 定义无大写字母，仅有小写字母
1.4 text-transform:uppercase 定义无小写字母，仅有大写字母
1.5 text-transform:inherit 规定应该从父元素继承text-transform属性的值

2. css实现角标效果

结构如下

<tag>未达到审核标准</tag>

css样式

// css实现角标
tag{
color: #fff;
// background: #EA3447;
background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) rgba(20, 30, 41, 0.76);
background-blend-mode: soft-light;
font-size: 10px;
padding:2px 6px;
line-height: 16px;
border-radius: 4px 4px 4px 0px;
position: relative;
&::before{
  content:'';
  position: absolute;
  width: 3px;
  height: 3px;
  // background: #BB2A39;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background-color: inherit;
  left: 0;
  bottom: -3px;
  clip-path: polygon(0 0, 100% 0, 100% 100%); /*三角*/
}
}