本片介紹僅用CSS做出tooltip那樣的提示框及箭頭等形狀！
首先介紹一下CSS：after選擇器
定義和用法：(參考w3school:after選擇器)
：after選擇器在被選元素的內容后面插入內容，使用content屬性來指定要插入的內容
例：
p:after
{
content:"台詞：-";
background-color:yellow;
color:red;
font-weight:bold;
}
具體大家可以參考：w3school！
下面來介紹用:after選擇器來制作CSS箭頭等提示框：（這里將一步一步簡單的設計，每一步添加的內容就是與前一步多出來的style代碼內容，注意區別！）
首先，我們的HTML代碼：
<body> <div class="demo"></div> </body>
讓我們來設置該盒子的樣式：
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } </style>
截圖：
這里需注意我們設置position屬性為relative，是為了允許我們設置我們的“箭頭”（還沒有出現）絕對定位並且保持它和我們的盒子有聯系！
接着我們繼續插入“箭頭”（還沒有出現）基本樣式：
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; height:20px; width:20px; background:yellow; } </style>
截圖：
你將會注意到一些事，一、我們僅僅插入了一個黃色的方塊，那個就是我們將要設計成箭頭的方塊；二、我們設置絕對定位absolute以至於我們可以將它移動到我們想要的位置上！
繼續，這兒給黃色方塊（即“箭頭”前身）設置邊框，這兒的邊框就是箭頭的實體，並且去掉黃色方塊的內容（通過設置.demo:after中的樣式“height:0;width:0”去掉黃色方塊，這里我們省略了黃色方塊的height、width）：
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; //height:20px; //width:20px; background:yellow; border:10px solid gray; } </style>
截圖：
現在再將灰色邊框方塊設計成箭頭形式：
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; //height:20px; //width:20px; //background:yellow; //border:10px solid gray; border:10px solid transparent; border-top-color:gray } </style>
截圖：
OK！我們可以看到箭頭成形！
下面來設置它的位置為我們想要的（此例箭頭移動至下端）：
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; //height:20px; //width:20px; //background:yellow; //border:10px solid gray; border:10px solid transparent; border-top-color:gray; top:100%; left:10px; } </style>
截圖：
到這里基本上完事了
下面整體樣式設計下（其實就更改了盒子的背景色與箭頭顏色相同）：
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; //height:20px; //width:20px; //background:yellow; //border:10px solid gray; border:10px solid transparent; border-top-color:gray; top:100%; left:10px; } </style>
截圖：
具體需要什么樣的樣式可以自行設置了！例如將箭頭移動到其他三邊可以設置border-T\R\B\L-color:gray;和TRBL(TRBL是指top\right\bottom\left)即可！
當然要修改箭頭在盒子邊框上的位置時，還需注意：邊框border的大小不包含在自身盒子尺寸內！所以設計時需要注意margin的影響，比如箭頭在下邊框中居中，我們考慮上面的同時還需添加：“ margin-left:-10px; ”才可居中！
結論來自yy浮萍人生的評論（簡潔形象~~哈哈~~）：
此例設計原理：設置偽類選擇器盒子的寬度和高度為0,那邊border形成的區域是[X]這個樣子的，其他三邊透明了，所以呢就顯示了個三角形！
（本文參考：YUI Team:CSS Quick Tip: CSS Arrows and Shapes Without Markup）
更多知識分享：微笑空間站