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

創新互聯公司專注于昆都侖企業網站建設,響應式網站設計,商城網站開發。昆都侖網站建設公司,為昆都侖等地區提供建站服務。全流程按需網站制作，專業設計，全程項目跟蹤，創新互聯公司專業和態度為您提供的服務

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

本文操作環境：windows7系統、HTML5&&CSS3版，DELL G3電腦

純css實現三角形原理

在實現之前先來熟悉一下css盒模型

然后創建一個普通的應用

<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;
}

效果：

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

.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;
}

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

.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;
}

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

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

還可以實現一個直角三角形：

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

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

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

底邊為上，所以border-top設置顏色，它的寬度即為高，所以寬度設置為60，底邊的長度需要右邊框來撐開（因為左邊是直角，代表沒有其他邊框跟它重合），所以設置右邊框，且寬度為三角形的長，即50。

總結：

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

以上是“css如何實現三角”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

名稱欄目：css如何實現三角
網頁路徑：http://m.newbst.com/article18/ghogdp.html

成都網站建設公司_創新互聯，為您提供用戶體驗、軟件開發、定制開發、網站排名、標簽優化、網站維護

廣告

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