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

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

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

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

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

html：

div>

css：

!--小盒子的樣式--

.box

width:20px;

height:20px;

background-color:blue;

}

我們看一下效果，其實(shí)就是一個(gè)普通的，背景顏色為藍(lán)色的div。

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

width:50px;

height:50px;

background-color:blue;

border-top:50pxsolidred;

border-right:50pxsolidyellow;

border-bottom:50pxsolidgreen;

border-left:50pxsolidpink;

}

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

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

width:0px;

height:0px;

border-top:50pxsolidred;

border-right:50pxsolidyellow;

border-bottom:50pxsolidgreen;

border-left:50pxsolidpink;

}

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

4，假設(shè)我們想要一個(gè)向上的三角形，只要把小盒子上、右、左方向邊框的顏色設(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做出了小三角形，是不是很簡(jiǎn)單。

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

1，首先，做三個(gè)小盒子1號(hào)，和3號(hào)小盒子都做成小三角形，2號(hào)小盒子做成一個(gè)正方形。

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

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

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

.box{

transform:translate(54px,10px);

.box3{

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

}