CSS和CSS3實作畫出三角形元素

這篇文章主要介紹了關於CSS和CSS3實現畫出三角形元素，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前端頁面偶爾需要有三角形圖標或是三角形樣式，現在圖示的三角形大多用字體圖示去實現了，但是有些大的三角形模組還是需要前端運用CSS樣式去畫出來的，下面介紹各種角度的三角形css樣式程式碼，希望能對大家帶來幫助

1：triangle-up

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2：triangle-down

# #

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

3：triangle-left 

#

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

4：triangle-right 

#

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

5::triangle-topleft

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

6：triangle-topright

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

###7：triangle-bottomleft#########

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

#########8：triangle-bottomright :##########

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

## #以上就是本篇文章的全部內容了，更多相關內容請關注PHP中文網。 ######相關推薦：#########CSS3實作傾斜與旋轉動畫效果################################################## #####

以上是CSS和CSS3實作畫出三角形元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！