最终结果如下图:
全部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;
}