純css製作三角形

1、在通過css弄出三角形前，我們需要了解一下border的我們平常忽視的小祕密。
如果給一個div的css樣式上給他四個邊分別以不同的顏色渲染，那麼它每個邊是怎麼樣的呢？

如果只給一條邊予以顏色，那麼它的形狀是這樣的。

代碼： html
<div></div>
  css
div{
width:100px;
height:100px;
border-top:10px solid red;
}

現在看起來和我們想的結果似乎一樣，都是矩形的形狀。但是如果把這div周圍的邊都渲染顏色呢？

代碼： html
<div></div>
  css
div{
width:100px;
height:100px;
border-top:10px solid red;
border-right:10px solid blue;
}

四條邊：

div{
border-top:10px solid red;
border-right:10px solid blue;
border-bottom:10px solid black;
border-left:10px solid pink;
}

效果如圖：

是不是和想象中的不一樣？現在每條邊變成了梯形的形狀，平常四條邊予以同樣的顏色我們看不出，現在就顯而易見了。

2、知道這個祕密後，弄三角行形狀是不是就簡單多了？起碼這個梯形就像一個三角形的底角一樣。
可以想象一下，可能是因爲我們設置了這個div的高度，寬度，所以這個三角形的頂角就給削掉。
然後我們不設置高度寬度。

代碼： html
            <div></div>
        css
            div{
                    width:0px;
                    height:0px;
                    border-top:10px solid red;
                    border-right:10px solid blue;
                    border-bottom:10px solid black;
                    border-left:10px solid pink;
                }

得到下面這個效果，

3、現在，顯而易見，有四個三角形。我們只需要對其餘三個我們不需要的三角形的顏色設置爲透明即可。這裏假設我只需要最上面的紅色三角形。

div{
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}

得到效果，

哈哈，三角形就做出來啦~~~