CSS實現空心三角指示箭頭

web開發中，三角形的平常應用，以三角形指示箭頭最爲常見，其用CSS來實現很是簡單，熟悉了以後相比於引入SVG或是背景圖片會是更好更靈活的選擇。

而三角箭頭通常而言，又分爲兩種，一種是視覺上沒有邊框的，咱們叫作實心三角形；還有一種是視覺上有邊框的，而三角箭頭刨去邊框的部分又要與主體元素的背景顏色一致，咱們叫作空心三角形。

言歸正傳，講一下怎樣實現的。

首先，講一下三角形的實現原理，熟悉的同窗能夠跳過這一步。

三角形實現原理

三角形的實現原理是寬高都不設置（即爲0），只設置邊框，若是四個邊框都設置寬度（border-width）、樣式（border-style）和顏色（border-color），效果如圖：

上面是四個邊框border-width同樣時的效果，其實border-width是能夠本身根據需求來變化的，以下圖效果：

上面看到的都是四個三角形，其實想實現單個的三角形只需把其餘三個三角形的border-color設置爲透明色transparent就能夠了（2017年還用考慮IE6嗎）。

這樣就實現三角形了。

實心三角形箭頭

實心三角形的原理就是一個三角形絕對定位到主體元素邊界處並鏈接起來。

爲了語義化，咱們用單標籤，三角形用僞類來實現。

把三角形顏色換成和主體元素一致的背景色就能夠了。以下圖：

空心三角箭頭

空心三角形的原理就是一個邊框顏色的三角形絕對定位到主體元素邊界處並鏈接起來，而後另外一個主體元素背景色的三角形絕對定位並覆蓋到第一個三角形上面，關鍵的一點是第二個三角形相較於第一個三角形定位上偏移的距離應等於邊框寬度。

說得可能比較晦澀，看效果圖會更清楚明白（爲了區分顯示，第一個三角形用的粉色，第二個白色）

把第一個三角形顏色換成邊框顏色，第二個三角形顏色換成背景顏色就能夠了。

爲了語義化，咱們使用單標籤，兩個三角形用before和after僞類來實現，由於after僞元素會覆蓋before僞元素，因此after僞元素就是第二個三角形。

第二個三角形定位的偏移距離

這是比較容易被忽略的一點！

爲了視覺效果，也爲了用戶體驗，咱們應該將三角箭頭的邊框寬度和主體元素的邊框寬度保持一致。

通常可能會有同窗認爲第二個三角形的偏移值和主體元素邊框寬度同樣，實際上是不對的。

第二個三角形相較於第一個三角形的偏移值其實應該是主體元素邊框寬度的"根號2"倍，約爲1.414，爲了方即可以按1.4倍計算。

下圖是原理圖：

假設主體元素邊框寬度爲6px，因此第二個三角形相較於第一個三角形的偏移量應爲6px*1.4 = 8.4px

在線demo

本文首發於我的博客yoowin.me，歡迎訪問！