三角形气泡框

用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颜色设置为透明。