纯CSS绘制三角形箭头图案技术解析

最近我想修改一下这个网站，我想在上面放置一个提示框。这是很容易，但我想让提示框上有一个三角形的箭头。可是，一想到这需要使用图片，并且各种颜色，各种方向的箭头要准备无数种，这几乎是一种灾难。幸运的是，MooTools的核心开发着Darren Waddell告诉了我一个非常棒的技术：用CSS绘制三角形箭头。使用纯CSS，你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头！

CSS代码

1. /* create an arrow that points up */  
2. div.arrow-up {   
3.  width: 0;    
4.  height: 0;    
5.  border-left: 5px solid transparent;  /* left arrow slant */  
6.  border-right: 5px solid transparent; /* right arrow slant */  
7.  border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */  
8.  font-size: 0;   
9.  line-height: 0;   
10. }   
11.   
12. /* create an arrow that points down */  
13. div.arrow-down {   
14.  width: 0;    
15.  height: 0;    
16.  border-left: 5px solid transparent;   
17.  border-right: 5px solid transparent;   
18.  border-top: 5px solid #2f2f2f;   
19.  font-size: 0;   
20.  line-height: 0;   
21. }   
22.   
23. /* create an arrow that points left */  
24. div.arrow-left {   
25.  width: 0;    
26.  height: 0;    
27.  border-bottom: 5px solid transparent;  /* left arrow slant */  
28.  border-top: 5px solid transparent; /* right arrow slant */  
29.  border-right: 5px solid #2f2f2f; /* bottom, add background color here */  
30.  font-size: 0;   
31.  line-height: 0;   
32. }   
33.   
34. /* create an arrow that points right */  
35. div.arrow-rightright {   
36.  width: 0;    
37.  height: 0;    
38.  border-bottom: 5px solid transparent;  /* left arrow slant */  
39.  border-top: 5px solid transparent; /* right arrow slant */  
40.  border-left: 5px solid #2f2f2f; /* bottom, add background color here */  
41.  font-size: 0;   
42.  line-height: 0;   
43. }   

绘制这些三角形的关键在于，你要