css小角标怎么打出来

在很多网页设计中，经常会用到小角标来标注一些特殊信息，如新品、推荐等，在CSS中实现这个效果就需要使用到伪元素产生的小三角。 首先，在样式表中设置伪元素before或after，并指定其content为一个空字符串。然后，设置宽高为0，边框颜色、样式和宽度，使其生成一个小三角形。 下面是实现CSS小角标的代码示例：

p:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent; /* 上下两个方向决定了箭头朝向 */
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff; /* 左边的大小决定了箭头的宽度 */
    position: absolute;
    top: 0;
    left: -10px; /* 通过left属性来设置左偏移量，让它与文本处于同一水平线上 */
    z-index: 999; /* z-index属性控制层级，使其在文本上方显示 */
}

p {
    position: relative; /* 设置相对定位，以便让before伪元素实现绝对定位 */
}

使用以上代码可以在P标签前面生成一个小三角形，轻松实现CSS小角标的效果。