本片介紹僅用CSS做出tooltip那樣的提示框及箭頭等形狀！
首先介紹一下CSS：after選擇器
：after選擇器在被選元素的内容後面插入内容，使用content屬性來指定要插入的内容
例：
View Code
下面來介紹用:after選擇器來制作CSS箭頭等提示框：（這裡将一步一步簡單的設計，每一步添加的内容就是與前一步多出來的style代碼内容，注意差別！）
首先，我們的HTML代碼：
讓我們來設定該盒子的樣式：
截圖：
這裡需注意我們設定position屬性為relative，是為了允許我們設定我們的“箭頭”（還沒有出現）絕對定位并且保持它和我們的盒子有聯系！
接着我們繼續插入“箭頭”（還沒有出現）基本樣式：
你将會注意到一些事，一、我們僅僅插入了一個黃色的方塊，那個就是我們将要設計成箭頭的方塊；二、我們設定絕對定位absolute以至于我們可以将它移動到我們想要的位置上！
繼續，這兒給黃色方塊（即“箭頭”前身）設定邊框，這兒的邊框就是箭頭的實體，并且去掉黃色方塊的内容（通過設定.demo:after中的樣式“height:0;width:0”去掉黃色方塊，這裡我們省略了黃色方塊的height、width）：
現在再将灰色邊框方塊設計成箭頭形式：
OK！我們可以看到箭頭成形！
下面來設定它的位置為我們想要的（此例箭頭移動至下端）：
到這裡基本上完事了
下面整體樣式設計下（其實就更改了盒子的背景色與箭頭顔色相同）：
具體需要什麼樣的樣式可以自行設定了！例如将箭頭移動到其他三邊可以設定border-T\R\B\L-color:gray;和TRBL(TRBL是指top\right\bottom\left)即可！
當然要修改箭頭在盒子邊框上的位置時，還需注意：邊框border的大小不包含在自身盒子尺寸内！是以設計時需要注意margin的影響，比如箭頭在下邊框中居中，我們考慮上面的同時還需添加：“ margin-left:-10px; ”才可居中！
此例設計原理：設定僞類選擇器盒子的寬度和高度為0,那邊border形成的區域是[X]這個樣子的，其他三邊透明了，是以呢就顯示了個三角形！