1、利用Css 的border繪制三角形的原理：
div的border是有寬度和顏色的，當div的寬度比較大的時候，比如上面代碼每個邊100像素，顏色又不一樣，瀏覽器怎么渲染顏色呢？經測試發現，寬度較大的border相交時：
1、只有相鄰邊才會相交，對邊是不可能相交的
2、相交區域(顯然是矩形)按對角線划分成兩個三角形，兩個三角形分別渲染成兩個邊的顏色，顏色不會出現重疊的情況
3、調整四個邊的寬度，加上中間區域的寬度，配以不同顏色和透明，各種簡單多邊形(舉一反三)已經不在話下了
<html>
<style>
*{margin:0px; padding: 0px;}
.tran{
position: relative;
left:10px;
top:10px;
width: 50px;
height: 50px;
border-bottom: 10px solid red;
border-left: 10px solid green;
border-top: 10px solid red;
border-right: 10px solid green;
}
</style>
<div class="tran"></div>
</html>
效果圖：
三角形：
<html>
<style>
*{margin:0px; padding: 0px;}
.tran{
position: relative;
left:10px;
top:10px;
width:0;
height:0;
/*border-bottom: 100px solid red;*/
border-left: 100px solid transparent;
border-top: 100px solid red; /*要形成上面的三角形，需要設置上面這條邊有顏色，左邊和右邊透明*/
border-right: 100px solid transparent;
}
</style>
<div class="tran"></div>
</html>
效果圖
