我們經(jīng)常在逛網(wǎng)頁的時候，會看到一些三角形，比如下面這張圖，個人中心后面有個三角形，那么我們?nèi)绾卫胏ss樣式來繪制出這個三角形呢？

三角形案例

剛剛開始學(xué)習(xí)css，我們可以用border來實現(xiàn)。

借助border的粗細(xì)、樣式、顏色三個屬性來繪出三角形，那又是怎樣才能得到這個三角形呢？我們來看看下面這三張圖片：

三角形的由來

看了這三個圖形，我們大概能明白了三角形是怎樣產(chǎn)生的了。第一個圖形我們設(shè)置了寬width高h(yuǎn)eight，然后又設(shè)置了邊框border，給border的四邊設(shè)置了同樣粗細(xì)、實線、不同的顏色，在這個圖形中，我們看到了梯形，沒錯，梯形也可以這樣做出來，如果只需要顯示一個梯形，我們只需將其他三邊的border顏色設(shè)置為透明色transparent就可以了。再來看第二個圖形，是由四個小三角形組成的，我們可以認(rèn)為一開始這個元素寬高都為0，這樣我們再給它設(shè)置邊框粗細(xì)、樣式、顏色，就會得到這個圖片了，顯然，第三個圖片是在第二個圖片的基礎(chǔ)上將其它三個邊框的顏色設(shè)置為透明色，這樣就會得到一個三角形的效果了。代碼如下：

?參考代碼

利用此方法我們來實現(xiàn)下面平行四邊形吧！

平行四邊形

首先我們按照上面介紹的方法寫出兩個三角形，分別將border-top和border-bottom設(shè)置可見顏色，接下來我們需要給大得div設(shè)置為絕對定位position：relative；然后再給里面的div設(shè)置相對定位(相對于它本身原始位置的定位)，利用開發(fā)人員工具調(diào)試得到最優(yōu)的top和left數(shù)值，代碼如下

平行四邊形設(shè)計

對于學(xué)習(xí)的這些內(nèi)容，我們可以自己寫出一個七巧板了

七巧板

趕緊動動手吧在接下來的學(xué)習(xí)中，我們將還會利用新學(xué)的方法來繪制這些圖形，繼續(xù)關(guān)注哦！??