css实现网站图片三角形样式,网站会经常在,置顶,推荐,热门...等特殊标注场景都能够用得到,使用了transform:rotate(-30deg)属性来实现。
html代码
<div class="laohan"><div class="marker"><span>置顶</span></div></div>
css样式
.laohan{
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
}
广告插入