CSS實現空心三角指示箭頭

蘇英偉發表於2017-09-26
CSS

本文首發於yoowin.me，歡迎訪問！

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

附程式碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>空心三角形指示箭頭</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 100px;
            border: 6px solid #555;
            border-radius: 20px;
            margin: 100px auto;
            background-color: #8a98ff;
        }

        /*第一個三角形*/
        .box::before{  /*這裡的偽元素用單冒號和雙冒號都一樣*/
            content: '';
            display: block;
            position: absolute;
            top: -26px;
            left: 80px;
            border-left: 20px solid transparent ;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #555;
        }

        /*第二個三角形*/
        .box::after{
            content: '';
            display: block;
            position: absolute;
            top: -17.6px; /*向下偏移量是矩形邊框寬度的1.4（根號2）倍，即8.4，top值為-26-（-8.4）*/
            left: 80px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #8a98ff;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>複製程式碼

相關文章