很多时候我们需要使用一个类似下拉菜单的三角形图标，虽然用图片也可以实现，但是修改起来不方便，所以一般使用纯CSS的方法来实现。
工具/原料
1
HTML
2
CSS
方法/步骤
1
在HTML里面增加一个标签，如span。给这个标签增加类名，如arrow-top。 源代码如下：
2
在CSS文件中定义相应的CSS属性： border-bottom:4px solid #B7B7B7; border-left:4px dashed transparent; border-right:4px dashed transparent; 源代码如下：.arrow-down{ border-bottom:4px solid #B7B7B7; border-left:4px dashed transparent; border-right:4px dashed transparent;}
3
以上代码得到一个向上的灰色三角形图标，如果需要修改颜色，将#B7B7B7修改为其他颜色代码即可。 如果需要高度不一样的三角形图标，只需要将各个border的宽度修改为其他数值即可。 如果需要一个向下的灰色三角形图标，只需要将border-bottom修改为border-top即可。 如果需要一个向左的灰色三角形图标，只需要将以上代码border-left,border-right修改为border-top，border-bottom；border-bottom修改为border-right即可。 如果需要一个向右的灰色三角形图标，只需要将以上代码border-right修改为border-left即可。
4CSS三角形图标
注意事项
1
dashed不能修改为其他类型，如solid,dotted，否则可能出现不兼容。
2
transparent不能修改为其他颜色，也不能修改为其他值。
下一篇：CSS如何用border画三角形