西门的后花园

一个热爱网络的年轻人的博客

CSS实用小技巧,利用border属性实现一个标签做箭头

20140107解决火狐BUG,请看最新文章《解决火狐Firefox26显示用border实现箭头的bug》,附带三角形制作工具

前不久老大在群里提到京东的一个箭头实现方法,正好前天在CSS群里又有人聊到这个问题,我才发觉,原来用CSS写箭头的这个小技巧这么多人不知道,今天就介绍一下用CSS里的border属性来写箭头。

箭头很多地方要用到,特别是tips里。Discuz是用的背景图片,这也是大多数网站的做法,腾讯微博是用两个菱形◆特殊符号叠加,来实现的。今天介绍的方法是用一个标签来实现这个小箭头效果,如果要边框,两个标签叠加一下,就行了。

现看图(图片不是很清晰):

CSS实用小技巧,利用border做箭头

下面是我写的简单DEMO

HTML标签就一个空的,核心代码是CSS(上图左边效果):

span{display:block;overflow:hidden;width:0px;height:0px;margin:100px 100px 1000px;padding:0;font-size:0;border:100px dashed transparent;border-style:solid;border-color:#f00 #0f0 #00f #ff0;}

原理很简单,就是一个空标签,宽度和高度都是0,边框设置一个数字,这个时候他就只有边框了。那为什么会变成斜的呢?因为宽度和高度都是0,这个的正方形是由border组成。正方形平分切成4块,只有两种方法,一是“+”,二是“x”。border只有上右下左,所以自然是“x”,也自然就变成斜的了。不过请看上面的CSS代码,border是用的dashed,而又设置了border-style:solid;,我个人的理解是全局用虚线dashed(实际效果就变透明了,估计正好是虚线的中间空了的那一段),然后你需要哪里的箭头,就设置哪里为实线solid,然后给颜色。例如上图右侧的红色倒三角,就是在上方,所以就是border-top-style:solid;border-top-color:#f00;,效果见DEMO

上图右边CSS:

span{display:block;overflow:hidden;width:0px;height:0px;margin:100px 100px 1000px;padding:0;font-size:0;border:100px dashed transparent;border-top-style:solid;border-top-color:#f00;}

这里还写了2边箭头DEMO,3边箭头DEMO

不知道我说的大家是否能理解,所以说当老师真不容易啊!

上面的方法是为了兼容IE6,所以要用dashed。如果不考虑IE6,代码可以变得更为简洁,直接border即可,也不需要设置每个边的边框样式,直接设置颜色即可。

#d1{overflow:hidden;width:0px;height:0px;margin:100px 100px 1000px;padding:0;font-size:0;border:100px solid transparent;border-bottom-color:#00f;}

IE6下没有设置箭头颜色的地方会变黑:DEMO

其实,再加点CSS3圆角代码border-radius,形状会更有趣,大家自己尝试着写DEMO吧!

评论列表

  1. 拜读了,西门大虾,加油

  2. 确实表示没明白,为啥变成斜的了~~

  3. 这代码真 神奇 这也能画成

  4. 虽然没看懂,但是看起来很厉害的样子 😎

  5. 很有用,这个很多地方都用的上!

  6. 💡 果断收了

  7. css是一门艺术,就这么滴实现了箭头
    其实还有不懂之处,按照正常逻辑 4分其实还有N种方法 比如 三条平行线平分或者不规则线条等等
    但是它是怎么就直接+和x了 其中的逻辑实在不解

    • 4分不能按照大众逻辑,你要按照CSS的逻辑来考虑这个问题呀!
      CSS里只有上下左右4边(这里不说CSS3),“+”是左上、右上、右下、左下。所以“x”才是符合的。

  8. 真心没有搞懂,理论上,border-top,包含一半的border-left,一半的border-right,给border-top加颜色的时候为什么是显示一个三角形?而不是一个矩形? ❓

  9. 自己用着舒服就好哇

  10. 其实一直喜欢淘宝那个鼠标移上去旋转的效果~

  11. 不错,兼容 chrome + 火狐 + ie7

  12. 我用的是另一种方式,什么时候也写出来。

  13. 刚刚从Jucelin那边过来,看看你们代码区别 ,嘿嘿 /// 创意无限啊

  14. 欧阳

    你说的是哪个,我在淘宝页面上没有找到啊。

  15. 那你

    hah好

  16. 😈 学了一招~~

  17. ZeKai

    Thank you 🙄 学习了

发表评论

分类目录