css如何将div画成三角形

1、

#div1{
            height: 100px;
            border-style: solid;
            border-width: 100px 100px 100px 100px;
            border-color: red forestgreen blue cyan;
            width: 100px;
        }

根据代码渲染，显示效果如下（边框颜色border-color四个值默认的加载方向，top right bottom left）：

2、

#div1{
            border-style: solid;
            border-width: 100px 100px 100px 100px;
            border-color: red forestgreen blue cyan;
            width: 0px;
            height: 0px;
        }

渲染出如下图片：

3、

#div1{
            border-style: solid;
            border-width: 100px 100px 100px 100px;
            border-color: transparent transparent blue transparent;
            width: 0px;
            height: 0px;
        }

渲染出如下图片：

审查元素一看，问题就出来了：

虽然其它三个边都隐藏了，位置还在，怎么把多余的位置去掉呢？

4、

#div1{
            border-style: solid;
            border-width: 0px 100px 100px 100px;
            border-color: transparent transparent blue transparent;
            width: 0px;
            height: 0px;
        }

审查后如下：

5、

#div1{
            border-style: solid;
            border-width: 0px 0px 100px 100px;
            border-color: transparent transparent blue transparent;
            width: 0px;
            height: 0px;
}

效果如下：