用CSS实现箭头
在WEB开发中，POPUP和tooltip经常要用到类似的箭头，http://cssarrowplease.com/ 网站可以帮助我们自动生成对应的CSS代码。下面主要阐述一下CSS实现箭头的原理
上面的HTML代码将产生如下的效果
根据ID指定CSS的width和height属性，然后加入10px的黑色border
如果将这个DIV的面积缩小，width和height都改为20px，我们再看一下显示的效果
下面我们把DIV的width和height都设置为0
现在DIV显示的效果如下
因为DIV的width和height都为0，所以现在DIV显示的都是boder，如果我们把border的CSS调整一下
我们把border-top的颜色改为红色，现在显示效果如下
如果我们把border-bottom，border-left，border-right的颜色都改为透明色，会产生什么样的效果呢？
显示效果如下，一个红色的箭头已经出来了。
到现在为止，我们已经可以用CSS来画出一个任意大小，任意颜色，任意方向的箭头了。
一般的情况下我们是把箭头加到tooltip和popup上，按照目前的方法，我们需要增加一个DIV才能实现，而在实际的代码应用中，增加一个DIV不是很方便，为了解决这个问题，我们可以使用CSS的伪类 before或者after。
上面的代码，我们给DIV增加了after伪类，在after伪类里我们增加了一个空元素，因为是空元素，所以界面上看不到效果
接下来我们对after这个伪类做一下修改
我们为after伪类增加border属性，我们可以看到箭头已经显示出来了。 下面我们可以通过absolute属性，来控制箭头的位置，要实现子元素的absolute定位，父元素一定要是relative。
利用top:100%,我们将after伪元素移到DIV的下面，left:50%，我们将after伪元素放到50%的位置
但是从显示效果来看，箭头并没有按照我们预想的放置在中间位置。是因为箭头本身的宽度。可以通过margin-left来控制，我们再做一下修改
我们加入了一行CSS
margin-left: -10px;
现在箭头已经调整到了中间位置，当然我们可以根据绝对定位，可以把箭头放置在任何位置。
在CSSARROWPlease网站生成的arrow css里面，同时利用了after和before伪元素，是生成了两个boder width不同的伪元素，来产生箭头的阴影效果
浙公网安备 33010602011771号