<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tooltip,
.bubble,
.prompt-box {
width: 120px;
height: 60px;
margin: 50px;
background-color: #fff;
border: 1px solid #d2d2d2;
position: relative;
}
.tooltip::before,
.bubble::before {
content: "";
width: 10px;
height: 10px;
background-color: #fff;
border-left: 1px solid #888;
border-top: 1px solid #888;
transform: rotatez(45deg);
position: absolute;
top: -6px;
left: 10px;
}
.bubble::before {
background-color: #888;
z-index: -1;
}
.prompt-box::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top: 8px solid red;
border-right: 8px solid red;
position: absolute;
right: 0;
</style>
</head>
<body>
<div class="bubble"></div>
<div class="prompt-box"></div>
<div class="tooltip"></div>
</body>
</html>
知识点
1、rotate 表示旋转的角度。 正角度表示了顺时针的旋转，负角度表示逆时针的旋转。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。 absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
3、z-index 表示在上面或者下面显示，为正数时在上面，为负数时在下面。所以如果说top， left 会影响x轴和y轴上的位置，那么 z-index 就会影响元素在z轴上的位置。这样即使在有重叠的情况下，也可以决定哪一个元素显示在哪一个的上面。但比较复杂的是，z-index 不是影响元素在z轴位置上的唯一的因素。
