首先上图：
第一种方法大家可能想到了，就是用背景图片制作箭头符号，但是下面介绍的不是这种方法。
在介绍通过border制作箭头符号之前，先看下下面的css代码：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <style> div.button { background: #B1B1B1; color: #FFF; font-weight: bold; border: 10px solid #DFDFDF; border-right-color: black; border-left-color: red; border-top-color: yellow; border-bottom-color: green; width:100px; } </style> </head> <body> <div class="button"></div> </body> </html>
显示效果：
那么大家看到 上面的div的宽度为100px，没有设置高度，上下border所占高度为20px，那么这个div高为20px.如果将长度100px改为0px，是什么效果呢，如下图：
那么设置箭头符号如何做，大家就应该很清楚了
1、我想设置箭头向上的arrow,只需要下边框设置自己想要的非透明颜色（绿色部分），其他左、上、右边框设置为透明，就能获得我们想要的效果，其它三类方向的边框类似做法。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <style> div.arrow1{ background-color:transparent; width:0px; font-weight: bold; border:10px solid transparent; border-top-color: #666; margin:20px; } div.arrow2{ background-color:transparent; width:0px; font-weight: bold; border:10px solid transparent; border-bottom-color: #666; margin:20px; } div.arrow3{ background-color:transparent; width:0px; font-weight: bold; border:10px solid transparent; border-left-color: #666; margin:20px; } div.arrow4{ background-color:transparent; width:0px; font-weight: bold; border:10px solid transparent; border-right-color: #666; margin:20px; } </style> </head> <body> <div class="arrow1"></div> <div class="arrow2"></div> <div class="arrow3"></div> <div class="arrow4"></div> </body> </html>
2、组合做四种border生成自己想要方向的边框
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <style> div.arrow4{ background-color:transparent; width:0px; font-weight: bold; border:8px solid transparent; border-right-color: #666; border-bottom-color: #666; margin:20px; } </style> </head> <body> <div class="arrow4"></div> </body> </html>
上面是组合右下边框设置成自己想要的箭头符号如图：
，箭头大小可以通过border-width控制