在当前风行的的网站上，我们常常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简朴的方法可以利用一张图片取代，可是跟着前端技能的成长，以及开拓者对付前端机能的“吹毛求疵”，越来越多的前端开拓者开始“返璞归真”，在能不利用图片的场景中淘汰图片利用，css图标相对付图片尚有个优势是我们可以利便的定制图标的巨细以及颜色。
css实现三角形图标已不是什么新鲜技能，之前也有许多相关的技能文章，这篇文章主要是阐明下在实际场景中利用时碰着的问题以及如何回避这些问题。
根基道理大同小异，这里主要先容操作css border（虽然还可以利用css3的旋转技能实现，由于兼容性问题这里不涉及了）。
css border实现
一个div可能元素的border并不是我们直观意义上的一条有高度的线，而是一个等高梯形可能三角形（宽高为0时），可以看一下结果：
div界说：
<div></div>
css:
.arrow1{ width: 0px; height:0px; border-width: 30px; border-style: solid; border-color: #007998 #47A447 #3C6AB9 #D2322D; }
最终结果：
可以看到每一个偏向的border都是一个三角形，那么我们只需把对应偏向剩余其他偏向的border配置为透明可能埋没掉就可以获得任何偏向的一个三角形了。假如我们想获得一个下拉图标，我们可以将border的阁下和下边框改为透明，css窜改如下：
.arrow1{ width: 0px; height:0px; border-width: 30px; border-style: solid; border-color: #007998 transparent transparent transparent; }
再看一下结果：
注：transparent 属性用来在 background 中将 background-color 选项配置为配景颜色透明
bingo!就是我们想要的结果，可是在ie6下杯具鸟！
长长的大黑框，让人无法直视，这是因为ie6不支持transparent 透明属性，这时候我们可以将对应区域的border的样式配置为dashed，dashed在边框宽度很大时，会埋没掉。css修改如下：
.arrow1{ width: 0px; height:0px; border-width: 30px; border-style: solid; border-color: #007998 transparent transparent transparent; }
结果如下（ie6下查察）：
可是，到此仍没有竣事，我们配置个阴影来查察下最终生成的结果：
即即是我们看到的已经生成一个我们需要的三角形，可是三角形的占用高度仍是原高度，这会导致在和其他元素利用时，造成上移的结果。此时，我们需要把下边框的高度配置为0：
.arrow1{ width: 0px; height:0px; border-width: 30px 30px 0; border-style: solid; border-color: #007998 transparent transparent transparent; }
再来看看结果：
好像仍是不太友好，在利用时我们仍需要修改对应的颜色，能不能按照父元素设定的颜色，显示对应的颜色呢？我们需要把border-color修改下：
.arrow1{ width: 0px; height:0px; line-height: 0px; border-width: 30px 30px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; }
结果（利用当前字体颜色）：
虽然除了操作css border生成外，我们还可以利用非凡字符◇叠加定位来生成，也可以利用css3的旋转来生成（ie6下需要hack处理惩罚）。操作border是一种常用并且简朴兼容的方法
您大概感乐趣的文章: