前端工程師經(jīng)常遇到要在頁面上做彈出提示層，不少框架給出了非常方便的組件，只需要給某個元素附上一個類就能實現(xiàn)漂亮的tip效果。
這篇文檔介紹如何根據(jù)CSS的border屬性實現(xiàn)一個箭頭居中顯示的tip層組件。

定義通用tip類

給通用的tip類定義一些必要的樣式

/* tips */
.ui-tip{
    width:auto;
    height:auto;
    padding:.3rem;
    margin:0 auto;
    position:relative;
    text-align:center;
    border-radius:5px;
}

接著定義一個箭頭類，因為不是所有的tip層都需要箭頭，只要給需要箭頭的tip層加上這個類就能出現(xiàn)箭頭，去掉類名即去掉箭頭。

/* tip with arrow */
.ui-tip-arrow::before,.ui-tip-arrow::after{
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0px;
    border-width: .25rem;
    border-style: solid;
}

這里定義了::before和::after兩個偽元素，為什么要兩個？這個問題在后面解釋，先往下看。

再定義兩個類，分別是向上的箭頭和向下的箭頭：

/* arrow up */
.ui-tip-arrow.ui-tip-arrow-up::after{ 
    border-left-color: transparent;
    border-top-color: transparent;
    bottom:100%;
    right:50%;
}
.ui-tip-arrow.ui-tip-arrow-up::before{
    border-right-color: transparent;
    border-top-color: transparent;
    bottom:100%;
    left:50%;
}
/* arrow down */
.ui-tip-arrow.ui-tip-arrow-down::after{ 
    border-left-color: transparent;
    border-bottom-color: transparent;
    right:50%;
    top:100%;
}
.ui-tip-arrow.ui-tip-arrow-down::before{
    border-right-color: transparent;
    border-bottom-color:transparent;
    left:50%;
    top:100%;
}

利用兩個偽元素實現(xiàn)一個居中的箭頭，這里要注意兩點：

1. ::before和::after各顯示為一個箭頭的左半部分和右半部分，需要調整好它們的四個邊上的border屬性。
2. 對::before和::after兩個偽元素設置好恰當?shù)?code>left和right屬性值，這樣他們才能居中顯示。

這樣一個箭頭居中顯示的tip類就做好了，剩下的就是給tip和箭頭層定義theme，這里定義了一個黑底白字的主題:

/* a black background theme */
.ui-theme-black{background-color:rgba(48,48,48,1);color:white;}
.ui-theme-black::after,.ui-theme-black::before {border-color: rgba(48,48,48,1);}

如何使用

跟大多數(shù)的組件使用方法類似，只需要給顯示為tip的元素添加對于的類名，例如：

<div class="ui-tip ui-tip-arrow ui-tip-arrow-up ui-theme-black"  id="tip_1">箭頭向上的tip層</div>
<div class="ui-tip ui-tip-arrow ui-tip-arrow-down ui-theme-black"  id="tip_2">just code it!</div>

顯示效果如下：

箭頭居中顯示的tip層

結語

上面提到了一個問題，就是為什么要用兩個偽元素實現(xiàn)箭頭，用一個不行么？當然可以！只是用一個偽元素的話要讓箭頭居中就比較困難了。

因為提示層的文字數(shù)量會變，寬度是不固定的，要讓偽元素處于居中的位置，就需要給它某種規(guī)則，例如常見的固定寬度+margin方法，或者使用伸縮盒子模型，但這些規(guī)則相對比較復雜。以后或許會使用這些方法來實現(xiàn)，這里暫不做討論。

我們再把圖片放大，仔細看一下上面的解決方案：

利用兩個偽元素實現(xiàn)居中的箭頭

其中::before元素的left值為50%,確保它的左邊在tip層的中間位置，然后讓它的頂部和右側的border顯示為透明；::after元素則相反，讓它的right值為50%，使其右邊位于tip層的中間位置并且設置其左側和頂部border透明。

Good!

參考過的文檔：

1. 純CSS氣泡框實現(xiàn)方法探究
2. CSS Arrows (Up, Down, Left and Right Triangle)