還在為小三角形切圖？使用純CSS寫一個簡單的三角形

　　同學們，當美工給的設計圖是這樣：

　　或者這樣：

　　我的內心其實是拒絕的-_-；但工作還得干，大部分同學會寫

<style>
.icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)}
</style>
<div class="con">
        <div class="icon"></div>
        <span>添加會計</span>
</div>

　　或者干脆利落

<style>
.icon img{...}
</style>
<div class="con">
        <div class="icon"><img src="..."></div>
        <span>添加會計</span>
</div>

　　這樣做是可以解決問題的，但是為了這個一個小小的小尖尖，我們還要大費周章的去切（很少同學能享受到美工給制作的sprite圖片），如果遇到的設計圖不是分層的或者設計軟件都不熟的話是很郁悶的...

　　其實有一種簡單的方法可以搞定這種小尖尖，大家請看：

　　

<style>
.con2{height: 50px;line-height: 50px;text-align: center;background:#ccecec;position: relative;}
.con2 i{border: 10px solid #ccecec; border-color: transparent transparent #ccecec transparent;position: absolute; top: -20px;left: 139px; }
</style>
<div class="con">
        <i></i>
        <span>添加會計</span>
</div>

　　這就涉及到border的問題，如果一個元素的寬度設為0，border-width卻為大於0的數，結果是會出現一個正方形（每個邊會成為一個等邊直角三角形），如果設置border-color為上右下左不同的四種顏色，結果就會出現一個由四個等邊三角形構成的正方形！

<style>
.test{width:0;border:50px solid ;border-color: #333 #ff0000 #ccecec #999}
</style>
<div class="test"></div>

　　這樣大家不難想到，如果把某三個邊的顏色設為透明，我們就能得到一個任意顏色的三角形了。

<style>
.test{width:0;border:50px solid ;border-color: transparent transparent #ccecec transparent}
</style>
<div class="test"></div>

　　然后我們將這個元素，例如<i>標簽，設置定位為相對定位，調整其top和left的值，即可輕易得到一個用css寫的小尖尖。

　　至於這個有邊框的尖尖，我給大家說一下思路：在上面實現的三角中放入一個類似的元素，我們稱之為子三角，父三角的border-color設置為下面div的邊框顏色，子三角的border-color設置為div的背景顏色，子三角定位（注意調整子三角位置，使其恰好露出父三角1px的邊），然后調整父三角的位置，OK大功告成！

　　如果知道的兄台就當是看個戲，不是很熟練的同學可以自己多練練。希望多多批評指正！