如何用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;  

}