技術標籤：前端css

CSS實現三角形原理及過程

在開發中，遇到很多的列表都需要用到三角形的箭頭，可以直接用一個圖片作背景鋪墊，但這樣佔用一定的記憶體，對於這種簡單的圖形純CSS也能實現，它佔用的記憶體相對圖片較小,所以相比而言，比圖片更好用。下面是具體實現步驟~
1、首先，建立一個div。給它設定一個寬高和背景顏色，並給它一個較大的邊框,將每一邊的邊框設定不同的顏色。

/*html程式碼*/
<div class="div1"></div>

/*css程式碼*/
.div1{
            width: 30px;
            height
 
: 30px;
            background-color: darkmagenta;
            border-top:100px solid cyan;
            border-bottom: 100px solid red ;
            border-left: 100px solid greenyellow;
            border-right: 100px solid pink; 
        }

下面來看看效果~

2、可以看到每邊的邊框成了一個梯形，現在如果將梯形的上底變為0就可以成一個三角形。所以只需將div的寬高設為0px

/*css程式碼*/
 

.div1{
            width: 0px;
            height: 0px;
            background-color: darkmagenta;
            border-top:100px solid cyan;
            border-bottom: 100px solid red ;
            border-left: 100px solid greenyellow;
            border-right: 100px solid pink; 
        }

下面來看看效果~

3、然後，將這四個三角形中三個三角形進行“隱藏”（三個的邊框顏色設為透明

.div1{
            width: 0px;
            height: 0px;
            border-top:100px solidrgba(0, 0, 0, 0);
            border-bottom: 100px solid red ;
            border-left: 100px solid rgba(0, 0, 0, 0);
            border-right: 100px solid rgba(0, 0, 0, 0); 
        }

這裡透明顏色使用的rgba，將透明度改為0%，也可以使用transparent。下面是效果圖~

以上就是css實現三角形的步驟la

喜歡的可以下方一鍵三連支援下哦！！！