經(jīng)常會用到三角形（比如對話啊，氣泡之類的地方），用于明確指向發(fā)言者
總是百度一下成型的寫法悴务，一直想研究下，耐不住懶啊
終于打敗的我的拖延癥譬猫，整體下那些關(guān)于CSS三角形的故事
分為兩種 （1）類名讯檐；（2）偽類
貌似這兩種寫法都和border脫不了干系，那我們先來看看 border 的到底是如何作用在盒模型上的
常見盒模型
隨便來個盒模型染服，當(dāng)當(dāng)當(dāng)
.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°柳刮，嗯~ 很合理
隨便來個盒模型
既然這樣挖垛，那定義類名寫三角形就很簡單了
一. 定義類名
讓內(nèi)容為0，需要哪個方向的角秉颗，寫那個方向的boder即可痢毒，需要注意的是，單單只寫一個方向的border無效蚕甥，需要相鄰方向的border一起來定義哪替，好比這是公共區(qū)域，一個人說了不算
//兩個方向
.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;
}
相對父元素定位
二. 利用偽類
