CSS 实现三角形

步骤

1. 首先需要使用盒子模型, 设置边框宽度填满盒子内容;

        div {
            width: 100px;
            height: 100px;
            border-top: solid purple;
            border-right: solid orange;
            border-bottom: solid blue;
            border-left: solid green;
            /* 调节边框尺寸为边长一半, 填满内容*/
            border-width: 50px;
        }

2. 去掉一侧边框后

3. 隐藏剩下两条边框,就得到一个直角等腰三角形;

        div {
            width: 100px;
            height: 100px;
            border-top: solid transparent;
            /*border-right: solid transparent; 去除*/
            border-bottom: solid transparent;
            /* 左侧绿色三角形*/
            border-left: solid green;
            /*  压缩盒子内容为0*/
            border-width: 50px;
        }

三角形的尺寸受盒子模型影响,通过调整盒子的大小可获得不同种内的三角形;