如何用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;
        }