經典CSS實現三角形圖標原理解析

前言：

　　在寫這篇文章之前，我也看過很多前端大神寫的代碼，But，都只是粘貼代碼和給出顯示效果，對於初學者來說大家都喜歡刨根問底，為什么要這樣做呢? 接下來就讓我給大家分享一下我對CSS實現三角形的理解：

border邊框語法：

 

• border 四條邊框設置
• border-left 設置左邊框，一般單獨設置左邊框樣式使用
• border-right 設置右邊框，一般單獨設置右邊框樣式使用
• border-top 設置上邊框，一般單獨設置上邊框樣式使用
• border-bottom 設置下邊框，一般單獨設置下邊框樣式使用,有時可將下邊框樣式作為CSS下划線效果應用

基本用法:

// 為引用 class="border-four" 的盒子對象設置1px像素紅色實線邊框
.border-four { border: 1px solid #ff0000; };

//  同理，單獨給左邊框設置1px像素紅色實線邊框
.border-left { border-left: 1px solid #ff0000; };

//  同理，單獨給右邊框設置1px像素紅色實線邊框
.border-right { border-right: 1px solid #ff0000; };

//  同理，單獨給上邊框設置1px像素紅色實線邊框
.border-top { border-top: 1px solid #ff0000; };

//  同理，單獨給底邊框設置1px像素紅色實線邊框
.border-bottom { border-bottom: 1px solid #ff0000; };

推薦常用邊框:

// 實線邊框：solid
.solid { border: 1px solid #ff0000; }

// 虛線邊框：dashed
.dashed { border: 1px dashed #ff0000; }

更多的邊框值詳見：W3C border-style 10種屬性值

進入正題：

首先來看一下正常塊元素設置四條不同顏色邊框效果：為了效果明顯，所有邊框寬度均為50px；

上圖 html 和 css 代碼如下：

<div class="test-border">我是居中內容</div>

.test-border {
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
    border-right: 50px solid #436eee;
    text-align: center;
}

請各位記住四條邊邊框位置范圍，這很重要。

接下來請在自己的大腦里面想象一下，當我去掉內容，效果顯示會是什么樣的？

再附上 html 代碼，css代碼同上沒有任何變化

<div class="test-border"></div>

效果如下：

 是不是和你想的不一樣？因為此處div是塊級元素，所以　會撐滿一行。接下來我們會將寬和高設置為0，看看效果又是什么樣的呢？附上 html 和css 代碼以及效果圖：

<div class="test-border"></div>

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
    border-right: 50px solid #436eee;
    text-align: center;
}

俗話說，沒有規矩，不成方圓。一定要養成書 CSS 代碼規范，推薦參考 Bootstrap CSS書寫規范，從現在做起。

我相信，看到上面效果圖，距離我們實現三角形四個方向帶箭頭已經不遠了，

如果我們將上圖的下邊框顏色設置為透明，即 border-right: 50px solid transparent;

效果如下：

如果我們我們去掉 border-bottom ，效果相信大家都能猜到，CSS 和 如下圖所示：

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
}

備注：由於此時寬和高都設置為0，所以text-align: center 是多余的，去掉。

沒錯，就是這樣的，和上面的透明的效果對比一下。

是不是離我們的三角箭頭又更近一步了？此時有的人或許會想，我把上邊框和下邊框一起去掉不就是向右的三角箭頭了？錯，錯，錯，重要事情說三遍。請恕我賣個萌，當我們去掉上邊框和下邊框，此時盒子模型的高度是為0，無法將左邊框撐高，我們將開不到任何東西，所以，不能將上邊框和下邊框寬度設置為0或者去掉。

當然，有的機智的小伙伴會說那我將上邊框或者下邊框去掉會怎么樣？讓我們去掉下邊框試一試吧。CSS 和 效果如下所示：

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-left: 50px solid #ff7f50;
}

 

沒錯，效果就是這樣，變成正方形了，等等我們是不是走錯路了，現在的效果是不是我們的三角箭頭原來越遠了？那我們繼續沒有去掉border-bottom上來展開思考，

怎么樣才能達到我們想要的效果呢？既不能去掉上邊框也不能去掉下邊框，我們可不可以隱藏上邊框和下邊框呢？秘密就在這兒。大家都知道css顏色有一個屬性值 transparent 

如果我們將上邊框和下邊框的顏色設置成透明會怎么樣？自己在慢慢想象一下，效果如下：

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid #ff7f50;
}

哇，這不就是傳說中我們夢寐以求的向右的三角箭頭么. 好神奇，我居然做到了。講了這么多，請讓我喝口水壓壓驚。

到這兒我們的css三角形圖標原理解析快接近尾聲了。接下來給出其余三個三角箭頭 CSS 代碼和效果圖。

箭頭向左:

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 50px solid #436eee;
}

箭頭向下：

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid #ff0000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

箭頭向上：

.test-border { 
    width: 0;
    height: 0;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

 

到此就講完了，很高興和大家分享，如果你有好的知識點，希望您也和大家分享。如果有不對的地方，還請大家指正。