CSS中使用伪类:before来实现在标签右上角添加“推荐”等字样的斜三角样式

在HTML中添加标签并赋上类名“.recommend”即可，如下所示：

<span class="recommend"></span>

css中

.recommend:before {

content: "推荐";
position: absolute;
top: -8px;
right: -26px;
z-index: 1;
padding: 14px 22px 2px;
background-color: #ff9900;
transform: rotate(45deg);
font-size: 12px;
color: #FFFFFF;

}

这样就可以在标签右上角添加带有“推荐”字样的斜三角样式了。

如下图（父级添加position: relative;）