20140107解决火狐BUG，请看最新文章《解决火狐Firefox26显示用border实现箭头的bug》，附带三角形制作工具
前不久老大在群里提到京东的一个箭头实现方法，正好前天在CSS群里又有人聊到这个问题，我才发觉，原来用CSS写箭头的这个小技巧这么多人不知道，今天就介绍一下用CSS里的border属性来写箭头。
箭头很多地方要用到，特别是tips里。Discuz是用的背景图片，这也是大多数网站的做法，腾讯微博是用两个菱形◆特殊符号叠加，来实现的。今天介绍的方法是用一个标签来实现这个小箭头效果，如果要边框，两个标签叠加一下，就行了。
现看图（图片不是很清晰）：
下面是我写的简单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;}
不知道我说的大家是否能理解，所以说当老师真不容易啊！
上面的方法是为了兼容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吧！
拜读了，西门大虾，加油
确实表示没明白，为啥变成斜的了~~
这代码真 神奇 这也能画成
虽然没看懂，但是看起来很厉害的样子 😎
很有用，这个很多地方都用的上！
💡 果断收了
css是一门艺术，就这么滴实现了箭头
其实还有不懂之处，按照正常逻辑 4分其实还有N种方法 比如 三条平行线平分或者不规则线条等等
但是它是怎么就直接+和x了 其中的逻辑实在不解
4分不能按照大众逻辑，你要按照CSS的逻辑来考虑这个问题呀！
CSS里只有上下左右4边（这里不说CSS3），“+”是左上、右上、右下、左下。所以“x”才是符合的。
嗯~ 加了border-radius 变成扇形啦 嘿嘿 很有意思 等同于把一个方形转了一下 😈
真心没有搞懂，理论上，border-top，包含一半的border-left，一半的border-right，给border-top加颜色的时候为什么是显示一个三角形？而不是一个矩形？ ❓
懂了，浏览器就是这样渲染的。
自己用着舒服就好哇
其实一直喜欢淘宝那个鼠标移上去旋转的效果~
👿 用transition:rotate做的.css3的动画效果.
😆 试试去，话说西门disapper了？
那效果我早拔下来了，只是个CSS3而已。
不错，兼容 chrome + 火狐 + ie7
一样兼容IE6的。
我用的是另一种方式，什么时候也写出来。
写了个方法：http://jucelin.com/css-pointer.html
刚刚从Jucelin那边过来,看看你们代码区别 ,嘿嘿 /// 创意无限啊
你说的是哪个，我在淘宝页面上没有找到啊。
hah好
😈 学了一招~~
Thank you 🙄 学习了