纯css实现角标效果，通常在置顶，推荐，热门等需要特殊标注的场景中可以应用到，这里主要用到transform:rotate(-30deg)属性来实现，具体实现代码如下：1，html代码<div class="thumb"><div class="marker"><span>精品推荐&...
纯css实现角标效果，通常在置顶，推荐，热门等需要特殊标注的场景中可以应用到，这里主要用到transform:rotate(-30deg)属性来实现，具体实现代码如下：
1，html代码
<div class="thumb"><div class="marker"><span>精品推荐</span></div></div>
2，css样式代码
.thumb{
position: relative;
overflow: hidden;
}
.marker{
position: absolute;
line-height: 35px;
width: 200px;
text-align: center;
left: -60px;
top: 20px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 2;
color: #fff;
background:#fb3329
}
