这个案例基于对boder属性的高级理解，他的原理是：当元素的宽高为0，边框(border)不为0时，四个角边框交界重叠处分45度角平分
为方便大家理解请看如下代码：
|
1 2 3 4 5 6 7 8 9 |
div { border-color: red green blue pink;/*边框颜色：顺序为：上、右、下、左*/ border-style: solid; border-width: 20px; height:20px; width:20px; } <div></div> |
效果如下图所示：
这样是不是好理解多了呢？大家注意观察各个边框交界处。
下一步我们设置它的宽高为0在看一下效果：
|
1 2 3 4 5 6 7 |
div { border-color: red green blue pink;/*边框颜色：顺序为：上、右、下、左*/ border-style: solid; border-width: 20px; height:0; width:0; } |
最后一步保留上边框颜色，其余边框颜色设置同背景色一样，这里为白色
|
1 2 3 4 5 6 7 |
div { border-color: red #fff #fff #fff;/*边框颜色：顺序为：上、右、下、左*/ border-style: solid; border-width: 20px; height:0; width:0; } |
学习到了…以前还以为是css3做出来的呢，非常感谢
这个还是很有用处的，很多网站的下拉菜单都用上这个。三角形用图片不好，有点浪费资源的感觉，直接代码就可以。除了代码之外可以用字符来解决，比如说用◇、●之类的，再控制字体大小就是一个图形了
原来如此、