如何用CSS画三角形和气泡框

原理

.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