用CSS绘制三角形箭头

用CSS绘制三角形箭头。使用纯CSS，你只需要很少的代码就可以
创作出各种浏览器都兼容的三角形箭头！

 

CSS代码:

/* create an arrow that points up */ 
div.arrow-up { 
    width: 0;  
    height: 0;  
    border-left: 5px solid transparent;  /* left arrow slant */ 
    border-right: 5px solid transparent; /* right arrow slant */ 
    border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */ 
    font-size: 0; 
    line-height: 0; 
} 

/* create an arrow that points down */ 
div.arrow-down { 
    width: 0;  
    height: 0;  
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #2f2f2f; 
    font-size: 0; 
    line-height: 0; 
} 

/* create an arrow that points left */ 
div.arrow-left { 
    width: 0;  
    height: 0;  
    border-bottom: 5px solid transparent;  /* left arrow slant */ 
    border-top: 5px solid transparent; /* right arrow slant */ 
    border-right: 5px solid #2f2f2f; /* bottom, add background color here */ 
    font-size: 0; 
    line-height: 0; 
} 

/* create an arrow that points right */ 
div.arrow-right { 
    width: 0;  
    height: 0;  
    border-bottom: 5px solid transparent;  /* left arrow slant */ 
    border-top: 5px solid transparent; /* right arrow slant */ 
    border-left: 5px solid #2f2f2f; /* bottom, add background color here */ 
    font-size: 0; 
    line-height: 0; 
} 

绘制这些三角形的关键在于，你要让箭头所指方向的两个侧边有很粗的边框。而背向箭头
方向的一边也是同样粗的边框，而这条边的颜色就是你的三角形的颜色。边框越粗，
三角形越大。用这种方法你可以绘制出各种颜色、各种大小、各种朝向的箭头。
最妙的是，你只需要几行CSS代码就能实现这种效果。