我以前一直很好奇，这些下拉菜单中的小箭头是怎么实现的，直到我看到了进阶的CSS。
OK，let me tell you hao to do.
想要实现这个效果，方法很多，我知道的就两个：
图片作弊法，CSS妙用法
图片作弊法适合自己做着玩的，但不适合上线的网站——因为多一个图片意味着多一个HTTP请求，这对于服务器的压力可想而知。
SO，有没有更好的办法？
那就是CSS妙用法。
我们都知道，每一个块元素都是有border属性的，那么我们为什么不尝试使用border去画一个三角形呢？
这个时候，聪明的小伙子就要：
？？？
那我要是告诉你，这个三角形就是使用边框做出来的，你敢信吗？
在没有学到之前，我也不信的，直到我学到了。
这个时候，就得先介绍一下border属性啦：
border-width、border-style、border-color
如果我们给一个div元素设置：
border-width: 30px;
border-style: solid;
border-color: #982053 #721394 #333 #897923;
就可以获得：
一条神奇的边框
如果我们再修改一下div的长度，就可以获得：
灰常地beautiful~
div是块级元素，块级元素有个最大的特点就是：
独占一行
所以，如果我们限制了块级元素的宽为0，就让内容区丢失了，这个时候，padding又没有，所以边框是全部“挤”在一起，就成了上面的模样。
我们知道，border-color有个参数，叫做透明shai。
如果我只保留一个边框有shai，那会发生什么事情？
就可以神奇地发现，原来能创造出这么多三角形。
而如果我们只需要保留向上的三角形，该怎么办？
很简单，直接去掉左上右这三个边框的颜色就OK了。
但是这还不够完美，我们的目的是获得一个三角形。
这个时候，我们再在div内部创建一个div，用同样的方法进行创建（注意border-width的属性值要小于父盒子的），就可以发现：
？？？儿子怎么骑到父亲的头上去了？？？
那接下来该怎么办？
使用定位，让子盒子移动到父盒子内部即可：
这是不是特别像个三角形了？
如果我们再把子盒子的颜色改为背景色一样的颜色，就可以获得：
是不是很简单呢？
全部代码：
<style>.father{position: relative;width: 0px;border-width: 30px;border-style: solid;/* border-color: #982053 #721394 #333 #897923; */border-color: transparent transparent #333 transparent;}.son{position: absolute;top: -26px;left: -28px;width: 0px;border-width: 28px;border-style: solid;border-color: transparent transparent #fff transparent;}</style><body><div class="father"><div class="son"></div></div>
</body>
这里又是一个子绝父相的好例子。
