css构造三角形和梯形的问题

盒子模型

• 利用盒子模型， border属性构造出如下图形：可看见梯形

        .box{
            width: 20px;
            height: 20px;
            border-left: 30px solid red;
            border-right: 30px solid green;
            border-top: 30px solid yellow;
            border-bottom: 30px solid pink;
        }

三角形

• 去掉盒子的width和height, 可以看见三角形

        .box{
            width: 0px;
            height: 0px;
            border-left: 30px solid red;
            border-right: 30px solid green;
            border-top: 30px solid yellow;
            border-bottom: 30px solid pink;
        }

单个三角形

• 将其它边的border设置为透明即可显示单个三角

        .box{
            width: 0px;
            height: 0px;
            border-left: 30px solid red;
            border-right: 30px solid transparent;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }

单个梯形

• 添加width 和 height，然后取一边可见即可

        .box{
            width: 20px;
            height: 20px;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 30px solid transparent;
            border-bottom: 30px solid red;
        }

总结

实现其实很简单吧，主要是利用盒子模型中width,height和border属性来实现的呢，平时学习中还是要多思考，不然变个形就不认识了，加油加油！！！