HTML添加各个方向的小图标

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..

关键字词: HTML5ico

已有9条留言
  • 中国历史
    发布于 2014-11-14 17:07:55  回复该评论
  • 我拷贝代码到背地,看到的是空白页
    • admin
      发布于 2014-11-15 10:23:33  回复该评论
    • 请用Chrome下查看。或者你把代码发上来,我来看看。
  • 香港服务器租
    发布于 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  回复该评论
        • 嗯,我说的是我的主题用到了某一些插件还修改了源码。

发表评论:

◎欢迎您的参与讨论。