如何用css3的transform和before僞元素製做一個popover

最終結果以下圖：

所有dom元素就是一個div，這裏採用了兩個小技巧，很簡單的實現了這個效果，一個是before僞元素，前面的小尖尖就是這個僞元素，再利用第二個技巧，用transform將這個尖尖僞元素旋轉45度角，就實現了所須要的效果，經過位置調整，將這個尖尖放置到合適位置就大功告成了。

演示見runjs：http://runjs.cn/detail/i5ndsy02

下面將兩個css中關鍵的屬性說明一下：

.popover {
position: relative; /* 由於須要絕對定位子元素（這裏就是僞元素），因此須要將其設置爲相對對位 */
background-color: white;
width: 150px;
height: 200px;
margin: 10px auto;
}

.popover::before { /* 僞元素其實和普通元素沒多大區別 /
position: absolute; / 絕對定位 /
content:' '; / 僞元素須要有個content，這裏設了一個空格佔位 /
-webkit-transform: rotate(45deg); / 旋轉45度 /
left: -9px; / 把這個小尖尖突出來 /
top: 20px; / 往下挪一點點 /
width: 20px; / 20x20的一個元素 */
height: 20px;
background-color: white;
}