有时候网页中使用箭头以增强效果，一般的做法是使用图片，今天我们使用CSSCSS来实现“箭头效果”，使用CSS我们必须兼容所有浏览器（IE6、7、8、9、10、+），Chrome，Firefox，Opear...

 

1  2  3  4 
      5 
      6 
      7 
      8 
      9 10 23 26 27 28 
     
      29     
        30         
35         
38     
39     
        40         
45         
49     
50     
        51         
56         
60     
61     
        62         
67         
71     
72     
        73         
78         
82     
83 
      
       
        
31             
         
          32                 
          
33             
         
34         
        
36         
.arrow{ border-width:50px; border-color:red green blue black; border-style:solid solid solid solid}
37         
       
       
        
41             
         
          42                 
          
43             
         
44         
        
46         
.arrow-top{ border-width:50px; border-color:red transparent transparent transparent;  border-style:solid dashed dashed dashed; border-bottom:none;}47 
48         
       
       
        
52             
         
          53                 
          
54             
         
55         
        
57         
.arrow-right{ border-width:50px; border-color:transparent green transparent transparent;  border-style:dashed solid dashed dashed; border-left:none;}58 
59         
       
       
        
63             
         
          64                 
          
65             
         
66         
        
68         
.arrow-bottom{ border-width:50px; border-color:transparent transparent blue transparent;  border-style:dashed dashed solid dashed; border-top:none;}69 
70         
       
       
        
74             
         
          75                 
          
76             
         
77         
        
79         
.arrow-left{ border-width:50px; border-color:transparent transparent transparent black;  border-style:dashed dashed dashed solid; border-right:none;}80 
81         
       
      
     
84 85 86 

、