css怎么實現(xiàn)梯形

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

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

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

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

html：

div>

css：

!--小盒子的樣式--

.box

width:20px;

height:20px;

background-color:blue;

}

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

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

width:50px;

height:50px;

background-color:blue;

border-top:50pxsolidred;

border-right:50pxsolidyellow;

border-bottom:50pxsolidgreen;

border-left:50pxsolidpink;

}

看看效果，已經(jīng)是一個比較花哨的存在了。

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

width:0px;

height:0px;

border-top:50pxsolidred;

border-right:50pxsolidyellow;

border-bottom:50pxsolidgreen;

border-left:50pxsolidpink;

}

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

4，假設(shè)我們想要一個向上的三角形，只要把小盒子上、右、左方向邊框的顏色設(shè)置為透明，就只剩下下邊框，也就是向上的小三角了，來上代碼，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);

}

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

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

不多說，來，下面就來看看梯形要怎么實現(xiàn)

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里都有詳細(xì)的解釋，我這里只管實現(xiàn)我們要的效果。

3，先把所有的小盒子排成一排，使塊狀元素排成一排的方法：可以給小盒子加浮動float，也可以直接設(shè)置小盒子的display：inline-block；由于我的習(xí)慣是只要加浮動，就要給父元素清浮動，比較麻煩，我就直接設(shè)置小盒子的display：inline-block了。

4,最后設(shè)置一下1號，和3號小盒子的位移就ok了，看代碼

.box{

transform:translate(54px,10px);

.box3{

transform:translate(-54px,10px);

}