前端工程師經(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)：
-
::before和::after各顯示為一個(gè)箭頭的左半部分和右半部分，需要調(diào)整好它們的四個(gè)邊上的border屬性。 - 對
::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>
顯示效果如下：
結(jié)語
上面提到了一個(gè)問題，就是為什么要用兩個(gè)偽元素實(shí)現(xiàn)箭頭，用一個(gè)不行么？當(dāng)然可以！只是用一個(gè)偽元素的話要讓箭頭居中就比較困難了。
因?yàn)樘崾緦拥奈淖謹(jǐn)?shù)量會變，寬度是不固定的，要讓偽元素處于居中的位置，就需要給它某種規(guī)則，例如常見的固定寬度+margin方法，或者使用伸縮盒子模型，但這些規(guī)則相對比較復(fù)雜。以后或許會使用這些方法來實(shí)現(xiàn)，這里暫不做討論。
我們再把圖片放大，仔細(xì)看一下上面的解決方案：
其中::before元素的left值為50%,確保它的左邊在tip層的中間位置，然后讓它的頂部和右側(cè)的border顯示為透明；::after元素則相反，讓它的right值為50%，使其右邊位于tip層的中間位置并且設(shè)置其左側(cè)和頂部border透明。
Good!
參考過的文檔：
