用纯CSS实现的箭头

//通过border(边框)的部分“拐角”实现箭头效果，比图片轻便多了

1.梯形：当元素宽、高和边框的宽相近时，改变某一边的颜色可以看到一个梯形。

<div id="demo"></div>
<style>
    #demo{
    width:100px;
    height:100px;
    border:100px solid #ccc;
    border-left-color:#f60;//左边框变色
}
</style>

2.三角箭头：当元素宽、高为零，其他三边框为透明时，可以变出一个三角形。

<div id="demo"></div>
<style>
#demo{
    width:0;
    height:0;
    border:10px solid transparent;
    border-left-color:#f60;  //同理任意调整单边框color、width,获得你想要的箭头效果
}
</style>

3.不改变DOM，通过伪元素实现箭头。

<div id="demo"></div>
<style>
#demo{
    position:relative;
}
#demo:after{
    position:absolute;
    width:0;
    height:0;
    content:'';
    border:10px solid transparent;
    border-left:10px solid #f60;
}
</style>

4.伪元素实现三角箭头

<div id="demo"></div>
<style>
    #demo{position:relative;}
    #demo:before,#demo:after{
        position:absolute;
        right:0;
        width:0;
        height:0;
        content:'';
        border:10px solid transparent;
    }
    #demo:before{
        border-left-color:#f60;
    }
    #demo:after{
        right:1px;
        border-left-color:#fff;
    }
</style>

5. 三角形分割的Tab页

<ul id="demo">
    <li>Tab One</li>
    <li>Tab Two</li>
    <li>Tab Three</li>
    <li>Tab Four</li>
</ul>
<style>
    #demo{}
    #demo li{
        position:relative;
        float:left;
        margin-right:10px;
        padding-right:20px;
        list-style:none;
    }
    #demo li:before,#demo li:after{
        position:absolute;
        right:0;
        width:0;
        height:0;
        content:'';
        border:10px solid transparent;
    }
    #demo li:before{
        right:-1px;
        border-left-color:#f60;
    }
    #demo li:after{
        border-left-color:#fff;
    }
</style>

6.带箭头的提示框

<div id="demo"></div>
<style>
    #demo{
        position:relative;
        width:100px;
        height:100px;
        border:4px solid #ccc;
    }
    #demo:before,#demo:after{
        position:absolute;
        left:100%;
        top:50%;
        width:0;
        height:0;
        content:'';
        border:solid transparent;
    }
    #demo:before{
        margin-top:-10px;
        border-width:10px;
        border-left-color:#ccc;
    }
    #demo:after{
        margin-top:-6px;
        border-width:6px;
        border-left-color:#fff;
    }
</style>