在目前流行的网站上，我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单)。简单的方法可以用图片代替。但随着前端技术的发展，以及开发者对前端性能的“吹毛求疵”，越来越多的前端开发者开始“回归真实”，在不使用图片的场景中减少图片的使用。与图片相比，css图标还有一个优势，那就是我们可以轻松定制图标的大小和颜色。

用css实现三角形图标并不是什么新技术。之前有很多相关的技术文章。本文主要分析在实际场景中遇到的问题以及如何避免这些问题。基本原理类似，这里主要介绍css边框的使用(当然也可以使用css3的旋转技术，因为兼容性问题这里不涉及)。

css边框的实现

div或元素的边框不是我们直观意义上的有高度的线，而是高度相同的梯形或三角形(当宽度和高度都为0时)。你可以看看效果：div定义：

div class='arrow1'/divcss:

.箭头1{宽度： 0px；height:0px边框宽度： 30px；边框样式：实心；边框-颜色： # 007998 # 47a 447 # 3c 6a B9 # d 2322d；}最终效果：

可以看出，每个方向的边框都是三角形，所以我们可以通过将其他方向的边框设置为透明或隐藏来得到任何方向的三角形。如果我们想得到一个下拉图标，我们可以将边框的左、右、下边框改为透明，css的变化如下：

.箭头1{宽度： 0px；height:0px边框宽度： 30px；边框样式：实心；边框-颜色： #007998透明透明；}再看看效果：

注意：透明属性用于将背景色选项设置为背景中的透明背景色

答对了。这是我们想要的效果，但在ie6下，它是一只鸟！

长长的大黑框让人无法直视，因为ie6不支持透明属性，所以我们可以将对应区域的边框样式设置为虚线，边框宽度大的时候会隐藏。Css修改如下：

.箭头1{宽度： 0px；height:0px边框宽度： 30px；边框样式：实心；边框-颜色： #007998透明透明；}效果如下(见ie6下):

然而，这还没有结束。让我们设置一个阴影来查看最终生成的效果：

即使我们看到我们需要的三角形已经生成，三角形的占用高度仍然是原来的高度，这将导致与其他元素一起使用时向上移动。此时，我们需要将下边框的高度设置为0:

.箭头1{宽度： 0px；height:0px边框-宽度： 30px 30px 0；边框样式：实心；边框-颜色： #007998透明透明；}我们再来看看效果：

似乎还是不太友好。我们在使用的时候还是需要修改相应的颜色。我们可以根据父元素设置的颜色显示相应的颜色吗？我们需要修改边框颜色：

.箭头1{宽度： 0px；height:0px行高： 0px；边框-宽度： 30px 30px 0；border-style:实线虚线；边框-左侧-颜色：透明；边框-右侧-颜色：透明；}效果(使用当前字体颜色):

当然，除了css边框生成，我们还可以使用特殊字符叠加定位生成，也可以使用css3旋转生成(ie6下需要hack处理)。使用边框是一种常见、简单且兼容的方式