实现类似聊天消息的弹框样式（elementUI中的尖尖弹框）

在elementUI中我们经常这样的组件：

弹框

对于这样的弹窗，我们很容易写出这样的一个类似的：

demo

那么重点就放在了上面的那个尖尖怎么实现：

难点

这个的实现我的思路是这样的：
1.画出一个这样的矩形，
2.在这个矩形的上方某个位置固定一个三角形，就像这样：

画出一个尖尖

这时的代码如下：

css1

那么如何实现elementUI中那样有阴影的情况呢？
答案是使用两个三角形，一个是阴影的颜色，一个是框内的颜色，然后第一个三角形比第二个三角形的绝对定位高出边框宽度个像素。
说起来有点难以理解，画出来就是这样：黄色就是边框的阴影

例子

照着这个思路我们接着往下写：

画了一个三角形的情况

此时的代码是这样的：

h2 {
  width: 300px;
  height: 200px;
  border: 1px solid #dedcdc;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  background: white;
}
#test {
    top: 69px;
    left: 30px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: #e0dede;
}

最后我们在这个三角形后面再画一个位置低于它一个像素的三角形，并且设为白色:

最终效果

css代码如下：

h2 {
    width: 300px;
    height: 200px;
    border: 1px solid #dedcdc;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    background: white;
}
#test {
    top: 69px;
    left: 30px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: #e0dede;
}
#test::after {
    content: "  ";
    top: -9px;
    left: -10px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: white;
}