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

定義通用tip類

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

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

接著定義一個(gè)箭頭類，因?yàn)椴皇撬械膖ip層都需要箭頭，只要給需要箭頭的tip層加上這個(gè)類就能出現(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兩個(gè)偽元素，為什么要兩個(gè)？這個(gè)問題在后面解釋，先往下看。

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

/* 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%;
}

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

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

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

/* 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層

結(jié)語

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

因?yàn)樘崾緦拥奈淖謹(jǐn)?shù)量會變，寬度是不固定的，要讓偽元素處于居中的位置，就需要給它某種規(guī)則，例如常見的固定寬度+margin方法，或者使用伸縮盒子模型，但這些規(guī)則相對比較復(fù)雜。以后或許會使用這些方法來實(shí)現(xiàn)，這里暫不做討論。

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

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

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

Good!

參考過的文檔：

1. 純CSS氣泡框?qū)崿F(xiàn)方法探究
2. CSS Arrows (Up, Down, Left and Right Triangle)