SongKer 发布时间:2014-11-05 分类:Web 阅读:5480次 9 条评论
碰到网页需要制作不同方向的小图标时候也巧妙的可以用html代替了,而不用使用ico等图标啦。
样式:
<style type="text/css" /> .ico div { -webkit-box-flex: 1; position: relative; width: 100%; padding-right: 21px; } .icob:after { content: ""; display: inline-block; width: 6px; height: 6px; -webkit-transform: rotate(225deg); background: transparent; border-top: 2px solid #BD2325; border-left: 2px solid #BD2325; } </style>
HTML代码:
<div class="ico"></div>
主要是通过一个div设置2px的上边框,设置左边框。然后旋转225°(deg)即得到下面的效果,设置不同的旋转角度就可以得到不同的方向“图标”赶紧来试试吧。
实例效果(在现代浏览器下查看):
向下:
向上:
向右:
向左:
新技能,get..
下一篇:微信推送消息:给单用户推送消息
发布于 2014-12-04 22:38:31 回复该评论
发布于 2014-11-14 20:10:31 回复该评论
发布于 2014-11-14 17:07:55 回复该评论
发布于 2014-11-15 10:23:33 回复该评论
发布于 2014-11-09 14:54:38 回复该评论
独立IP主机 风暴来袭 优惠62% 终生3.8折,转发活动送wifi…
发布于 2014-11-06 08:37:16 回复该评论
发布于 2014-11-06 10:07:12 回复该评论
发布于 2014-11-06 12:16:02 回复该评论
发布于 2014-11-06 13:24:29 回复该评论
发表评论:
◎欢迎您的参与讨论。