今天一個剛開始學習html 的小白問我一個問題，css 可以實現正方形，長方形，和圓型（border-radius），怎么能做出個三角形、梯形等等形狀呢？於是我便開啟了裝逼模式， 給他講解了一下我的思路，在我的幫助下， 他終於用css 做出了自己的三角形、梯形。我表示很欣慰， 於是，為了幫助更多像我這個朋友一樣基礎的小白，我決定獻丑，把我的思路，和做法寫成一篇博文，分享給大家。
閑話少敘，開始！
1，首先，我創建了一個 class 名為 ‘box’ 的div，我們暫且親切的稱它為‘小盒子’
html：
<div class='box'>
</div>
css：
<!--小盒子的樣式-->
.box
{
width:20px;
height:20px;
background-color:blue;
}
我們看一下效果， 其實就是一個普通的，背景顏色為藍色的div。
2，然后，我們給‘小盒子’添加四條邊框樣式，邊框設置的寬一點， 四條邊框的顏色給不一樣的值， 方便我們查看，
.box
{
width:50px;
height:50px;
background-color:blue;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}
看看效果， 已經是一個比較花哨的存在了。
3，然后，我們把‘小盒子’的寬高設置為0px，去掉藍色的背景色， 當然就只剩下四周的邊框了，腦補一下， 然后我們上代碼，看卡效果。
.box
{
width:0px;
height:0px;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}
來，上效果，look一下！童鞋們， 我么似乎已經看到了4個顏色不同的三角形了，接下來要做的步驟，就很清晰了。
4，假設我們想要一個向上的三角形，只要把‘小盒子’上、右、左 方向邊框的顏色設置為透明， 就只剩下下邊框，也就是向上的小三角了， 來上代碼，look一下！
.box
{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}
看效果！綠色的向上的小三角就出現了， \(^o^)/
-------------------------------第一階段-總結-------------------------------------
通過上面的操作，我們已經成功的用css 做出了小三角形，是不是很簡單。
上面我說過了，也可以做出梯形，該怎么做呢？ 下面我們一起學習一下。↓
------------------------------------css做梯形---------------------------------------------
我們先理理思路，大家想一想，梯形是怎么構成的，小學的數學課本都講過的，就拿等腰梯形來說， 是由兩個直角三角形，和一個長方形或正方形組成的，看草圖↓
這意味着，我們要用三個‘小盒子’來拼接成一個梯形，這么一說大家的思路是不是豁然開朗了，
不多說，來，繼續分析，
1，首先，做三個‘小盒子’ 1號，和3號小盒子都做成小三角形，2號小盒子做成一個正方形。
html：
<div class='box'> </div> <div class='box2'> </div> <div class='box3'> </div>
css：
.box,.box3
{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
margin-bottom:10px;
}
.box2
{
width:50px;
height:50px;
background-color:green;
}
先看看效果↓
2，有人要問了， 形狀是出來了， 但是怎么拼起來呢，這里就要用到css中的定位指示 和 css3 里的transfrom 了。不了解的話，w3c里都有詳細的解釋，我這里只管實現我們要的效果。
3，先把所有的‘小盒子’排成一排，使塊狀元素排成一排的方法 ：可以給‘小盒子’加 浮動 float，也可以直接設置‘小盒子’的display：inline-block；由於我的習慣是只要加浮動， 就要給父元素清浮動，比較麻煩，我就直接設置‘小盒子’的display：inline-block 了。
4,最后設置一下 1號，和3號小盒子 的位移 就ok了， 看代碼↓
.box{
transform: translate(54px,10px);
}
.box3{
transform: translate(-54px,10px);
}
再看看效果↓
介紹到這里， 我們已經用css 把梯形做出來了， 還有其他的圖形， 比如平行四邊形等，類似的東西，舉一反三，都可以通過這種方法做出來，在這里我就不一一介紹了。最后，祝大家學習愉快。