用CSS写三角形，首先要理解的是border不是矩形，而是梯形。
width: 500px;
height: 500px;
border: 2px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000
image.png
但是如果把border的宽度改成30px呢？
image.png
改成30px后，border变成了一个梯形。
我们想象一种极端的情况，如果把width和height都变成0，border会变成什么样？答案如下图所示：
image.png
width: 0px;
height: 0px;
border-top: 30px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
image.png
去掉
border-bottom就是上面这样的。
了解画三角形的原理，写一个三角形气泡框就很容易了。
总结：三角形哪边是横线或纵线，哪边就是有颜色的，它的对面是没有border的，其余两边的border颜色设置为透明。
