css怎么實(shí)現(xiàn)三角

這篇文章主要介紹“css怎么實(shí)現(xiàn)三角”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“css怎么實(shí)現(xiàn)三角”文章能幫助大家解決問題。

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。

關(guān)于“css怎么實(shí)現(xiàn)三角”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。