��ѡ��̳

标题: css3 给图片贴上倾斜的文字标签 [打印本页]

作者: admin 时间: 2019-1-5 14:10
标题: css3 给图片贴上倾斜的文字标签
效果图：
(, 下载次数: 1)

html 部分
<div class="imgs"  >
   <p class="tag"> 优质 </p>

</div>

css 部分

<style type="text/css" >
div.imgs{ height:360px; width:360px;background:#ccc;position: relative; overflow: hidden;}
p.tag{ height:18px;
width:80px;
background:#d81526;
font-size:12px;
line-height:14px;
text-align:center;
color:#fff;
position:absolute;
top:0px; left:-20px;
transform:rotate(-45deg);
z-index:999;
-ms-transform:rotate(-45deg); /* Internet Explorer */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-18deg); /* Opera */
}

</style>

欢迎光临 ��ѡ��̳ (http://www.sunminxuan.cn/bbs/)

����ѡ������̳

��ѡ��̳