纯css实现三角形

纯css实现三角形

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

给标签设置这个类名，就可以得到四个三角形拼接的盒子。
1.上三角红色
2.下三角粉色
3. 左三角蓝色
4. 有三角黄色

最最最重要的一点，就是其实边框的宽度，就是对应着三角形的高，通过调整边框宽度，可以调整对应三角形的高度。