css如何實(shí)現(xiàn)三角

小編給大家分享一下css如何實(shí)現(xiàn)三角，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專注于昆都侖企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站開發(fā)。昆都侖網(wǎng)站建設(shè)公司,為昆都侖等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

css實(shí)現(xiàn)三角的原理：首先確定底邊是哪個(gè)方向，并設(shè)置哪個(gè)方向有顏色值；然后將其相對(duì)的邊直接去掉；接著設(shè)置其左右兩邊的寬度和為該三角形的底邊長，其自身的寬度為該三角形的高即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦

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

在實(shí)現(xiàn)之前先來熟悉一下css盒模型

然后創(chuàng)建一個(gè)普通的應(yīng)用

<p class="triangle"></p>
.triangle {
    width: 100px;
    height: 100px;
    border-top: 10px solid #000;
    border-right: 10px solid #ff0000;
    border-left: 10px solid #00ff00;
    border-bottom: 10px solid #0000ff;
}

效果：

此時(shí)需要注意四條邊框交接的地方，后面會(huì)用到。然后再將內(nèi)容物的寬高都去掉，為了方便觀察，將四個(gè)邊框都設(shè)置大一些，效果如下：

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000;
    border-right: 100px solid #ff0000;
    border-left: 100px solid #00ff00;
    border-bottom: 100px solid #0000ff;
}

現(xiàn)在是不是覺得三角形有點(diǎn)雛形了，四個(gè)方向的都有，想要哪個(gè)把其他方向的顏色設(shè)置成透明不就行了，先試一個(gè)向下的三角形：

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

看來是這個(gè)方法，當(dāng)然底邊框目前用不到，還會(huì)使總高度變高，可以直接去掉。是不是可以這樣理解，底邊在哪就留哪邊的顏色？
接下來還有一個(gè)問題，那就是這個(gè)三角形的寬高，仔細(xì)看這個(gè)三角形的寬正好是左右邊框的總和，也就是200px,而它的高當(dāng)然就是上邊框的寬度了，也就是100px?！就扑]學(xué)習(xí)：《css視頻教程》】
以此類推，如果設(shè)計(jì)稿給的是一個(gè)長50px高60px的一個(gè)向上的三角形，那么就應(yīng)該這樣寫：

.triangle {
    width: 0;
    height: 0;
    border-top: 60px solid #000;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
}

還可以實(shí)現(xiàn)一個(gè)直角三角形：

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000; 
    border-left: 100px solid transparent;
}

還有其他各種角度的直角三角形，寬高可自定義，例如制作一個(gè)長50 高60的向右直角三角形：

.triangle {
    width: 0;
    height: 0;
    border-top: 60px solid #000;
    border-right: 50px solid transparent;
}

底邊為上，所以border-top設(shè)置顏色，它的寬度即為高，所以寬度設(shè)置為60，底邊的長度需要右邊框來撐開（因?yàn)樽筮吺侵苯牵頉]有其他邊框跟它重合），所以設(shè)置右邊框，且寬度為三角形的長，即50。

總結(jié)：

普通三角形：底邊是哪個(gè)方向，就設(shè)置哪個(gè)方向有顏色值，其相對(duì)的邊直接去掉，然后其左右（上下）兩邊的寬度和為該三角形的底邊長，其自身的寬度為該三角形的高。
直角三角形：只需要兩條邊框,可以先把它填成一個(gè)方行，然后留底邊為有顏色值，補(bǔ)充的三角形在哪邊，就留哪邊。

以上是“css如何實(shí)現(xiàn)三角”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：css如何實(shí)現(xiàn)三角
網(wǎng)頁路徑：http://www.muchs.cn/article18/ghogdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、軟件開發(fā)、定制開發(fā)、網(wǎng)站排名、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)

廣告

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