css绘制一个三角形

1.首先我们先创建一个宽高100px的div，方便我们理解如何利用border属性做出三角形的

.box{
            width: 100px;
            height: 100px;
            border-width: 50px;/* 边框大小*/
            border-style: solid;/* 边框类型*/
            border-color: yellowgreen pink skyblue hotpink;/* 边框颜色*/
        }

2.如上图所示边框连接的临界点是斜切的，利用这个特性把div的宽高调成0px就可以得到四个三角形

3.然后把边框颜色调成transparent透明，再把其中一条边的颜色调出来就可以得到一个三角形了

        .box{
            width: 0px;
            height: 0px;
            border-width: 50px;/* 边框大小*/
            border-style: solid;/* 边框类型*/
            border-color: transparent;/* 把边框颜色调成透明*/
            border-top-color: yellowgreen;/*上边框颜色*/
        }