ѡ̳

 找回密码
 ע
搜索
查看: 176|回复: 0
打印 上一主题 下一主题

css3 给图片贴上 倾斜的文字标签

[复制链接]

789

主题

1158

帖子

4197

积分

Ա

Rank: 9Rank: 9Rank: 9

积分
4197
跳转到指定楼层
¥
发表于 2019-1-5 14:10:43 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
效果图:


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>



回复

使用道具 举报

您需要登录后才可以回帖 登录 | ע

本版积分规则

QQ|Archiver|ֻ|С|ѡ̳

GMT+8, 2026-5-2 04:40 , Processed in 0.083505 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表
0.0994s