CSS绘制三角形

纯CSS绘制三角形，实现原理是将宽高设置为0，设置边框来形成三角形的样式。

首先我们绘制一个宽高为0，边框为30的DIV，并加以颜色区分

有颜色边框，宽高为0的DIV

        .triangle {
            width: 0px;
            height: 0px;
            border-top: 30px solid chartreuse;
            border-left: 30px solid royalblue;
            border-right: 30px solid darkblue;
            border-bottom: 30px solid orangered;
        }

可以看出，宽高为0时边框是由三角形构成的

所以，当我们隐藏掉其他边框的时候，一个三角形就绘制出来了

CSS三角形

        .triangle {
            width: 0px;
            height: 0px;
            border-top: 30px solid transparent;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid orangered; /* 只显示下边框 */
        }