前端工程師經(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)一個居中的箭頭赘艳，這里要注意兩點：
-
::before和::after各顯示為一個箭頭的左半部分和右半部分雾家，需要調(diào)整好它們的四個邊上的border屬性。 - 對
::before和::after兩個偽元素設(shè)置好恰當?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>
顯示效果如下：
結(jié)語
上面提到了一個問題哭懈，就是為什么要用兩個偽元素實現(xiàn)箭頭，用一個不行么茎用？當然可以遣总！只是用一個偽元素的話要讓箭頭居中就比較困難了。
因為提示層的文字數(shù)量會變轨功，寬度是不固定的旭斥，要讓偽元素處于居中的位置，就需要給它某種規(guī)則古涧，例如常見的固定寬度+margin方法琉预，或者使用伸縮盒子模型，但這些規(guī)則相對比較復(fù)雜蒿褂。以后或許會使用這些方法來實現(xiàn)，這里暫不做討論卒暂。
我們再把圖片放大啄栓，仔細看一下上面的解決方案：
其中::before元素的left值為50%,確保它的左邊在tip層的中間位置，然后讓它的頂部和右側(cè)的border顯示為透明也祠；::after元素則相反昙楚，讓它的right值為50%，使其右邊位于tip層的中間位置并且設(shè)置其左側(cè)和頂部border透明诈嘿。
Good!
參考過的文檔：
