如何使用CSS画一个三角形

原理：其实就是规定元素的四个边框颜色及边框宽度，将元素宽高设置为0。如果要哪个方向的三角形，将对应其他三个方向的边框宽和颜色设置为0和透明transparent即可

1.元素设置边框，宽高，背景色

元素 边框为2px的，四个方向颜色不同

2.将元素宽高设置为0，边框宽设置为50px

    .border {
        width:0;
        height: 0;
//注意solid也要设置
        border: 50px solid;
        border-color: #96ceb4 #ffeead #d9534f #ffad60;
    }

元素变为四个三角形组合

3. 设置上、左、右透明度为transparent且设置右和下的边框

    .border {
        width:0;
        height: 0;
        border-style: solid;
        /* border-width: 0 50px 50px 0; */
        border-width: 0 50px 50px;
        /* border-color: transparent transparent #d9534f transparent; */
        border-color: transparent transparent #d9534f;
        position: relative;
    }

只要修改对应两边边框和该方向上以外的透明度即可