关于border绘制几何图形

先来最简单三角形绘制，我们先来看一个东西

        .hy{
            width: 40px;
            height:40px;
            background-color: cadetblue;
            border-top: 20px solid red;
            border-left:20px solid blue;
            border-right: 20px solid green;
            border-bottom: 20px solid yellow; 
        }

然后weight:0;height:0;看看

三角形不就成型了吗，想要什么方向的三角形，就将其余三个颜色调整为transparent