如何用CSS3生成直角梯形，原理是什么？

上下左右4條邊，最關(guān)鍵的一點(diǎn)：每?jī)蓷l邊的相交處是斜線的相交的。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)翁源免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

如果不渲染成斜線，那么寫瀏覽器內(nèi)核解析css的程序員要糾結(jié)了：上邊該壓著左邊線還是右邊線，誰壓誰都不合理啊，最簡(jiǎn)單的是弄成斜線等分，還不必去寫判斷誰該壓著誰的程序代碼。

于是，就給用邊框創(chuàng)造梯形、三角形留下了空間，其他三條邊顏色設(shè)置為透明或none，剩下的就是梯形或三角了，至于直角梯形，第6個(gè)div是，觀察第4個(gè)div的 none 起了什么作用，再看div6，相信你就明白了。上圖的代碼：

div?id="div1"1/div

div?id="div2"2/div

div?id="div3"3/div

div?id="div4"4/div

div?id="div5"5/div

div?id="div6"6/div

style

div{

float:?left;margin:?10px;

border-top:?30px?red?solid;

border-bottom:?30px?blue?solid;

border-left:?30px?yellow?solid;

border-right:?30px?green?solid;

}

#div1{width:?0;height:?0;}

#div2{width:?30px;height:?0;}

#div3{width:?30px;height:?30px;}

#div4{

width:?30px;

border-top:?none;

}

#div5{

border-top:?transparent?30px?solid;

border-bottom:?30px?blue?solid;

border-left:?transparent?30px?solid;

border-right:?transparent?30px?solid;

}

#div6{

width:?50px;?height:?0;

border-top:?none;

border-bottom:?40px?blue?solid;

border-left:?transparent?30px?solid;

border-right:?none;

}

/style

css 梯形，三角形 實(shí)現(xiàn)原理

首先，我們畫一個(gè)div，給div加上border，看看盒子模型本來的樣子

梯形：

由此可見，css繪制的梯形并不是一個(gè)容器，只是容器的一條邊。css把容器的其余三條邊設(shè)置為透明的，只顯示需要的一條邊，就是一個(gè)梯形了。

直角梯形

三角形

盒子模型分為兩種，一種是border-box，一種是center-box。低版本的ie中是border-box,在新的瀏覽器中，我們可以把容器的寬高設(shè)計(jì)為0或者特地設(shè)置box-sizing: border-box。

來看看border-box的效果：

由此可見，當(dāng)設(shè)置為border-box時(shí)，border的大小包含在容器大小之內(nèi),我們可以通過顯示某條邊來制作三角形

border-box畫直角三角形

center-box:

與border-box一樣，可以根據(jù)控制border的width和方向來畫出自己想要的三角形

css3 如直角(圓角)梯形

.div{

height:?80px;

width:?250px;

background-color:?#FFC800;

margin:?50px;

border-radius:?15px;

transform:?perspective(20px)?rotateX(-1deg)?rotateY(-2deg)?translateZ(0);

}

border-radius：12px

圓角 為零則為直角

梯形 [元素變形]

transform：

perspective [透視距離]

rotateX [橫向.x軸旋轉(zhuǎn)]

rotateY?[豎向.Y軸旋轉(zhuǎn)]

translateZ [Z軸移動(dòng),可以理解為放大和縮小]

了解這些基本的變形用法,就可以實(shí)現(xiàn) 【梯形】,

但復(fù)雜一些就沒辦法了，要用到SVG或Canvas，

如何用css3 transform寫出梯形

transfrom這個(gè)旋轉(zhuǎn)元素的，無法繪制梯形=-=

可以用選擇器來實(shí)現(xiàn)梯形，代碼如下。

!DOCTYPE html

html

head

meta charset="utf8"

title555/title

style type="text/css"

dl dd { width:30px; height:30px; background:#000;}

dl dd:nth-child(1) { width:30px;}

dl dd:nth-child(2) { width:60px;}

dl dd:nth-child(3) { width:90px;}

dl dd:nth-child(4) { width:120px;}

dl dd:nth-child(5) { width:150px;}

dl dd:nth-child(6) { width:180px;}

dl dd:nth-child(7) { width:210px;}

dl dd:nth-child(8) { width:240px;}

/style

script type="text/JavaScript"

/script

/head

body

dl

dd/dd

dd/dd

dd/dd

dd/dd

dd/dd

dd/dd

dd/dd

dd/dd

/dl

/body

/html

css 半梯形樣式

width:0;

height:0;

border:75px?solid;

border-top:none;

border-color:#F00;

border-right-color:transparent;

網(wǎng)站題目：css樣式梯形,css實(shí)現(xiàn)一邊是梯形
文章來源：http://chinadenli.net/article2/dsghooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、移動(dòng)網(wǎng)站建設(shè)、App開發(fā)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)