主机格调

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吧!

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/375.html