css三角形原理

前言：

　　在寫這篇文章以前，我也看過不少前端大神寫的代碼，But，都只是粘貼代碼和給出顯示效果，對於初學者來講你們都喜歡刨根問底，爲何要這樣作呢? 接下來就讓我給你們分享一下我對CSS實現三角形的理解：

border邊框語法：

 

• border 四條邊框設置
• border-left 設置左邊框，通常單獨設置左邊框樣式使用
• border-right 設置右邊框，通常單獨設置右邊框樣式使用
• border-top 設置上邊框，通常單獨設置上邊框樣式使用
• border-bottom 設置下邊框，通常單獨設置下邊框樣式使用,有時可將下邊框樣式做爲CSS下劃線效果應用

基本用法:

按 Ctrl+C 複製代碼

 

按 Ctrl+C 複製代碼

推薦經常使用邊框:

// 實線邊框：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-right ，效果相信你們都能猜到，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;
}

 

到此就講完了，很高興和你們分享，若是你有好的知識點，但願您也和你們分享。若是有不對的地方，還請你們指正。