css实现三角形

1、原理

原理是利用设置 border 的颜色，通过设置各个方向的boder宽度来控制三角形，然后隐藏其他边的颜色。

2、准备

    div {
   
    /*背景色方便对比显示*/
    background: #999999;
    /*必要条件*/
    box-sizing: border-box;
    /*宽高根据实际需要设置*/
    width: 100px;
    height: 100px;
    /*方便布局*/
    margin-bottom: 32px;
}

3、设置border

    .border {
   
        border-top: 20px solid red;
        border-bottom: 20px solid green;
        border-left: 50px solid blue;