CSS3 三角复习

三角形制作原理

给定一个宽度和高度都是0的盒子，设置盒子的上下左右边框为不同颜色，则会生成四个三角形。

代码部分

div{
            width: 0;
            height: 0;
            border-top: hotpink 100px solid;
            border-left: transparent 100px solid;
            border-right: transparent 100px solid;
            border-bottom: transparent 100px solid;
        }

三角强化

通过改变四个边框的高度，可以得到直角三角形或其他三角形

代码部分及示意图

div{
            width: 0;
            height: 0;
            border-top: hotpink 100px solid;
            border-left: transparent 50px solid;
            border-right: transparent 0px solid;
            border-bottom: transparent 0px solid;
        }