css3 三角形的画法及实现过程原理

先看效果图和代码：

FC3F9155-B566-4C29-9075-87707155F6DA.png

    
        


        .triangle_up{
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        .triangle_down{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        .triangle_left{
            width: 0;
            height: 0;
            border-right: 100px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .triangle_right{
            width: 0;
            height: 0;
            border-left: 100px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .float_left{
            margin:20px;
            float:left;
        }
    

        

        

        

    

实现过程：

387AA397-EC3F-40FE-A4DC-BF23FD2C6560.png

1–对应样式

.triangle_up {
    width: 100px;
    height: 100px;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
    border-right: 50px solid yellow;
    border-top: 50px solid blue;
}

2-对应样式

.triangle_up {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
    border-right: 50px solid yellow;
    border-top: 50px solid blue;
}

3-对应样式

.triangle_up {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
    border-right: 50px solid yellow;
}

4-对应样式

.triangle_up {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

三角形画好后，调整boder 宽度可以随意改变三角形形状。当4中去掉boder-left属性后，可以绘制直角三角形，与设定 border-left: 0px solid transparent 效果一致。