CSS制作小箭头

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

演示DEMO

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

主要用途:制作tips等。

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

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

比较下

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

最后说明

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

相关资源

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

24 thoughts on “CSS制作小箭头

  1. Dabo

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

    回复
        1. jucelin 文章作者

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

          回复
    1. jucelin 文章作者

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

      回复

发表评论

邮箱地址不会被公开。 必填项已用*标注