如何用CSS绘制一个小箭头—— \'>\'

小箭头的实现

原理

　　(1)使用css绘制两个三角形

　　(2)通过绝对定位让两个三角形不完全重叠

　　(3)让处于上层的三角形比处于下层的三角形偏移1像素，生成空心箭头

　　兼容处理：

　　　　在IE6及更低版本的浏览器中添加font-size: 0; line-height: 0; 目的是为了让三角形的height:0; 有效

实现

//结构中：实现向右箭头
    <div class="arrRight">
        <span class="after"></span>
        <span></span>
    </div>
<!--样式中：  -->
.arrRight{
            position: relative;
​
            width: 40px;
            height: 40px;
            
        }
        .arrRight span{
            position: absolute;
            left: 0;
            top: 0;
​
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            
            border-left: 20px solid #ff0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
        }
        .arrRight .after{
            border-left-color: blue;
            left: 2px;
        }