如何用纯css画个三角形

 网站前台开发的同胞们，你们是不是发现在某些侧边栏的每个标题的左边有个很小的三角形，默认状态下小三角形尖朝右，当鼠标移上去时，小三角形尖朝下。大家知道，这是图片而已。可是这里要给你们介绍的是不用图片，纯css实现小三角形。

请看下图:

何止是朝右朝下的三角形，朝左朝右也行啊。代码如下：

 

view plainprint?

1. <style type="text/css">  
2. .rightdirection  
3. {  
4.     width:0;height:0;  
5.     line-height:0;  
6.     border-width:20px;  
7.     border-style:solid;  
8.     border-color:transparent transparent transparent #A9DBF6;  
9. }  
10. .bottomdirection  
11. {  
12.     width:0;height:0;  
13.     line-height:0;  
14.     border-width:20px;  
15.     border-style:solid;  
16.     border-color: #A9DBF6 transparent transparent transparent;  
17. }  
18. .leftdirection  
19. {  
20.     width:0;height:0;  
21.     line-height:0;  
22.     border-width:20px;  
23.     border-style:solid;  
24.     border-color: transparent #A9DBF6 transparent transparent;  
25. }  
26. .topdirection  
27. {  
28.     width:0;height:0;  
29.     line-height:0;  
30.     border-width:20px;  
31.     border-style:solid;  
32.     border-color: transparent transparent #A9DBF6 transparent;  
33. }  
34. </style>  
35. <div  class="rightdirection"></div>  
36. <p>  
37. <div  class="bottomdirection"></div>  
38. <p>  
39. <div  class="leftdirection"></div>  
40. <p>  
41. <div  class="topdirection"></div>  

其中三角形的大小和颜色可以根据需要随意修改。