純css如何實現三角形

本篇內容介紹了“純css如何實現三角形”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

純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。
以此類推，如果設計稿給的是一個長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的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

“純css如何實現三角形”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！