CSS制作小箭头

在西门大哥的博客中看到一篇文章:CSS实用小技巧,利用border属性实现一个标签做箭头,西门使用的是border,这里jucelin介绍另一种方法,用到的是一个特殊字符:◆。

演示DEMO

代码:请狂击DEMO,然后右键,查看源代码(写得应该还算规范)。

主要用途:制作tips等。

实现原理:方法很简单,特殊字符◆就已经有了箭头的效果,那么用2个◆,用相对或绝对定位将他们完全重合,如果想做成向上的箭头,则再将下一层的◆向上移动1px。设置下颜色:下一层的使用的是下面内容部分的边框色,而上一层的◆使用的是内容部分的背景色,这样就出现一个想要的样式。

兼容性:用的position定位,兼容性你懂的(DEMO中未测试,用于生产需自测)。

比较下

西门大哥的方法并不好实现border同一色的问题,当然如果使用上面的方法也是可以实现的。

最后说明

如果一个页面中用了很多tips箭头,我仍然建议使用图片,减少浏览器的渲染时间,当然似乎要很多很多,才能看出浏览器有卡的效果。

相关资源

另一种实现小箭头的方法:CSS实用小技巧,利用border属性实现一个标签做箭头

本文固定链接: https://jucelin.com/css-pointer.html | Jucelin

该日志由 jucelin 于2012年05月01日发表在 前端设计 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: CSS制作小箭头 | Jucelin
关键字: , , ,

CSS制作小箭头:目前有24 条留言

  1. 15楼
    Dabo:

    这个使用了一个特殊符号,只能算是半CSS,可以用很简单的纯CSS的方法实现

    2012-08-21 14:48
  2. 14楼
    slwl:

    哈哈,过来看一下,向你学习。

    2012-07-27 17:39
    • jucelin:

      向你学习,你的模版真不错!

      2012-07-28 14:11
      • 归档页面能参考下?求指导。

        2012-07-30 13:00
        • jucelin:

          这个是WP的,而且模版不是俺弄的。不过JS部分,我倒略知一二。

          2012-07-30 15:21
  3. 13楼
    萝卜:

    不错,留个心。用到时过来取

    2012-07-08 20:05
  4. 12楼
    in1874:

    飘过来学习的 哈哈 ~!

    2012-07-08 16:13
  5. 11楼
    羽中:

    很有创造性的思路 :grin: 不错不错

    2012-07-06 16:56
    • jucelin:

      惭愧惭愧,俺也是从别人那学来的。

      2012-07-11 11:03
  6. 10楼
    卜卜口の:

    还是border可靠吧

    2012-07-03 17:49
    • jucelin:

      对,这个我也见过,什么时候找找

      2012-07-11 11:03
  7. 9楼
    hostgator:

    技术性很强的文章,来学习一下

    2012-06-14 16:16
  8. 巧妙. .mark下!

    2012-05-29 08:52
  9. 这个方法好巧妙。

    2012-05-12 10:45
  10. 6楼
    君说:

    嘿嘿。来学习了。申请友链哈。 :lol:

    2012-05-04 12:36
  11. 5楼
    an9:

    路过,技术文. :mrgreen:

    2012-05-04 08:08
  12. 刚好最近在学CSS,O(∩_∩)O哈哈~ 记录记录

    2012-05-03 19:51
  13. 地板
    FengFree.com:

    这个不错,标记下

    2012-05-03 08:22
  14. 板凳
    小林:

    这个不错哦,很有用的

    2012-05-02 22:42
  15. 沙发
    西门:

    不错,这是腾讯微博采用的方法 :mrgreen:

    2012-05-02 09:37
    • jucelin:

      我也是学来的,不过忘记在哪看到的了。太对不起那作者了,呵呵

      2012-05-02 20:16

发表评论

您必须 [ 登录 ] 才能发表留言!

更多