纯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 }