第css怎么實現梯形我們先理理思路，大家想一想，梯形是怎么構成的，小學的數學課本都講過的，就拿等腰梯形來說，是由兩個直角三角形，和一個長方形或正方形組成的，看草圖

這意味著，我們要用一個方形和兩個三角形來拼接成一個梯形，這么一說大家的思路是不是豁然開朗了，

方形好實現，那么三角形怎么實現？下面我們來看看三角形的實現方法：

1，首先，我創建了一個class名為box的div，我們暫且親切的稱它為小盒子

html：

div>

css：

!--小盒子的樣式--

.box

width:20px;

height:20px;

background-color:blue;

}

我們看一下效果，其實就是一個普通的，背景顏色為藍色的div。

2，然后，我們給小盒子添加四條邊框樣式，邊框設置的寬一點，四條邊框的顏色給不一樣的值，方便我們查看，

width:50px;

height:50px;

background-color:blue;

border-top:50pxsolidred;

border-right:50pxsolidyellow;

border-bottom:50pxsolidgreen;

border-left:50pxsolidpink;

}

看看效果，已經是一個比較花哨的存在了。

3，然后，我們把小盒子的寬高設置為0px，去掉藍色的背景色，當然就只剩下四周的邊框了，腦補一下，然后我們上代碼，看一下效果。

width:0px;

height:0px;

border-top:50pxsolidred;

border-right:50pxsolidyellow;

border-bottom:50pxsolidgreen;

border-left:50pxsolidpink;

}

來，上效果，look一下！童鞋們，我么似乎已經看到了4個顏色不同的三角形了，接下來要做的步驟，就很清晰了。

4，假設我們想要一個向上的三角形，只要把小盒子上、右、左方向邊框的顏色設置為透明，就只剩下下邊框，也就是向上的小三角了，來上代碼，look一下！

.box

width:0px;

height:0px;

border-top:50pxsolidrgba(0,0,0,0);

border-right:50pxsolidrgba(0,0,0,0);

border-bottom:50pxsolidgreen;

border-left:50pxsolidrgba(0,0,0,0);

}

看效果！綠色的向上的小三角就出現了，\(^o^)/

通過上面的操作，我們已經成功的用css做出了小三角形，是不是很簡單。

不多說，來，下面就來看看梯形要怎么實現

1，首先，做三個小盒子1號，和3號小盒子都做成小三角形，2號小盒子做成一個正方形。

html：

div>

css：

.box,.box3

width:0px;

height:0px;

border-top:50pxsolidrgba(0,0,0,0);

border-right:50pxsolidrgba(0,0,0,0);

border-bottom:50pxsolidgreen;

border-left:50pxsolidrgba(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);

}