经常会用到三角形（比如对话啊，气泡之类的地方），用于明确指向发言者
总是百度一下成型的写法，一直想研究下，耐不住懒啊
终于打败的我的拖延症，整体下那些关于CSS三角形的故事
分为两种 （1）类名；（2）伪类
貌似这两种写法都和border脱不了干系，那我们先来看看 border 的到底是如何作用在盒模型上的
常见盒模型
随便来个盒模型，当当当
.Triangular .bubble{
width: 300px;
height: 100px;
border-top:10px solid #000;
border-right:10px solid red;
border-bottom:10px solid blue;
border-left:10px solid green;
margin-top: 20px;
}
原来border的四个边，在拐角相遇的时候，各占45°，嗯~ 很合理
随便来个盒模型
既然这样，那定义类名写三角形就很简单了
一. 定义类名
让内容为0，需要哪个方向的角，写那个方向的boder即可，需要注意的是，单单只写一个方向的border无效，需要相邻方向的border一起来定义，好比这是公共区域，一个人说了不算
//两个方向
.test{
width: 0;
height: 0;
border-top: 10px solid #000;
border-right：10px solid transparent;
}
//三个方向
.test{
width: 0;
height: 0;
border-top: 10px solid #000;
border-right：10px solid transparent;
border-left：10px solid transparent;
}
两个方向
三个方向
综上：需要相邻的三个
border才能定义一个水平垂直方向的三角形
写的简单一点
.test{
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #000;
}
第二步，相对父元素定位
.father{
position:relative;
}
.test{
width: 0;
height: 0;
border-right: 10px solid #000;
border: 10px solid transparent;
//定位
position: absolute;
left: -10px;
top: 10px;
}
相对父元素定位
二. 利用伪类
