這篇文章給大家分享的是有關(guān)css如何實(shí)現(xiàn)梯形的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、滎陽網(wǎng)站維護(hù)、網(wǎng)站推廣。
css實(shí)現(xiàn)梯形的方法：1、創(chuàng)建三個(gè)div元素；2、利用border屬性分別將第一和第三個(gè)div元素設(shè)置為直角三角形；3、將第二個(gè)div元素設(shè)置為正方形；4、使用transform屬性將兩個(gè)直角三角形和一個(gè)正方形拼接成一個(gè)梯形。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
------------------------------------css做梯形---------------------------------------------
我們先理理思路，大家想一想，梯形是怎么構(gòu)成的，小學(xué)的數(shù)學(xué)課本都講過的，就拿等腰梯形來說， 是由兩個(gè)直角三角形，和一個(gè)長方形或正方形組成的，看草圖↓
這意味著，我們要用一個(gè)‘方形’和兩個(gè)三角形來拼接成一個(gè)梯形，這么一說大家的思路是不是豁然開朗了，
方形好實(shí)現(xiàn)，那么三角形怎么實(shí)現(xiàn)？下面我們來看看三角形的實(shí)現(xiàn)方法：
1，首先，我創(chuàng)建了一個(gè) class 名為 ‘box’ 的div，我們暫且親切的稱它為‘小盒子’
html：
css：
重慶分公司
重慶分公司
.box
{
width:20px;
height:20px;
background-color:blue;
}我們看一下效果， 其實(shí)就是一個(gè)普通的，背景顏色為藍(lán)色的div。
2，然后，我們給‘小盒子’添加四條邊框樣式，邊框設(shè)置的寬一點(diǎn)， 四條邊框的顏色給不一樣的值， 方便我們查看，
.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;
}看看效果， 已經(jīng)是一個(gè)比較花哨的存在了。
3，然后，我們把‘小盒子’的寬高設(shè)置為0px，去掉藍(lán)色的背景色， 當(dāng)然就只剩下四周的邊框了，腦補(bǔ)一下， 然后我們上代碼，看一下效果。
.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一下！童鞋們， 我么似乎已經(jīng)看到了4個(gè)顏色不同的三角形了，接下來要做的步驟，就很清晰了。
4，假設(shè)我們想要一個(gè)向上的三角形，只要把‘小盒子’上、右、左 方向邊框的顏色設(shè)置為透明， 就只剩下下邊框，也就是向上的小三角了， 來上代碼，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);
}看效果！綠色的向上的小三角就出現(xiàn)了， \(^o^)/
通過上面的操作，我們已經(jīng)成功的用css 做出了小三角形，是不是很簡單。
不多說，來，下面就來看看梯形要怎么實(shí)現(xiàn)
1，首先，做三個(gè)‘小盒子’ 1號，和3號小盒子都做成小三角形，2號小盒子做成一個(gè)正方形。
html：
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里都有詳細(xì)的解釋，我這里只管實(shí)現(xiàn)我們要的效果。
3，先把所有的‘小盒子’排成一排，使塊狀元素排成一排的方法 ：可以給‘小盒子’加 浮動(dòng) float，也可以直接設(shè)置‘小盒子’的display：inline-block；由于我的習(xí)慣是只要加浮動(dòng)， 就要給父元素清浮動(dòng)，比較麻煩，我就直接設(shè)置‘小盒子’的display：inline-block 了。
4,最后設(shè)置一下 1號，和3號小盒子 的位移 就ok了， 看代碼↓
.box{
transform: translate(54px,10px);
}
.box3{
transform: translate(-54px,10px);
}再看看效果↓
介紹到這里， 我們已經(jīng)用css 把梯形做出來了， 還有其他的圖形， 比如平行四邊形等，類似的東西，舉一反三，都可以通過這種方法做出來，在這里我就不一一介紹了。最后，祝大家學(xué)習(xí)愉快。
感謝各位的閱讀！關(guān)于“css如何實(shí)現(xiàn)梯形”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
