原理
.demo_1{
width:100px;
height:100px;
border: 20px solid;
border-color: red blue red blue;
}
333副本.png
可以看出边框其实是梯形，极致状态下就是三角形
.demo_2{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}
11111副本.png
那么画三角形只需要把其他border设置为透明即可
例：以下代码得到绿色三角形
.demo_3{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid green;
}
如果底部的边框变大，则变成高瘦三角形
.demo_4{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 150px solid green;
}
简单说下气泡框的原理
利用before after 伪元素，画两个三角形叠加，第一个为边框颜色，第二个透明
气泡三角形.png
