最终结果如下图：

全部dom元素就是一个div，这里采用了两个小技巧，很简单的实现了这个效果，一个是before伪元素，前面的小尖尖就是这个伪元素，再利用第二个技巧，用transform将这个尖尖伪元素旋转45度角，就实现了所需要的效果，通过位置调整，将这个尖尖放置到合适位置就大功告成了。

演示见runjs：

下面将两个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; }