CSS小技巧——畫個三角形

CSS學習有一個特點，只要告訴你一個套路，你就會了，但是讓你自己想很難想出來。

首先，開啟你的編輯器或者jsbin，新建一個html檔案和一個css檔案，用<link>把兩個檔案關聯起來。

1. 然後在html裡新建一個<div>，開啟CSS開始編輯

div{
border:10px solid red;
width:10px;
height:10px;
border-top-color:green;
border-bottom-color:blue;
border-left-color:yello;
border-right-color:black;
}

你會發現四個不同顏色的梯形，以及中間有一個空心的正方形

2. 將width或者height慢慢減小，直到0px。
   你會發現出現了兩個等腰直角三角形，如果都調到0px的話，會有四個。
   但是到現在還沒結束，這些等腰直角三角形還不夠，我需要按對角劃分的三角形。

3. 將width和height都減到0px,再加一個屬性“border-top-width:10px;”

div{
...
width:0px;
height:0px;
...
border-top-width:10px;
}

將"border-top-width:10px;"的值慢慢調到0px，就會發現左邊的三角形就是我要的。

4. 接著，將其他顏色都變透明，只留下我要的那塊，換成我需要的顏色就行
   最後簡化為

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

是不是很簡單呢，多練練誰都能會了。