对于border属性大家都不陌生，我们经常会这么设置一个元素的border属性：

div.rec{
    border-left:20px solid #F00;
    border-right:20px solid #F00;
    border-top:20px solid #00F;
    border-bottom:20px solid #00F;
    width:100px;
    height:100px;
    }

这个图形有一个极限状态，那就是当width和height设置为0后，就是四个三角形围成的一个矩形。


我们可以利用这点生成不同方向的三角形。

div{
    border-left:100px solid transparent;
    border-right:100px solid transparent;
    border-bottom:100px solid #00F;
    width:500px;
    height:500px;
    }

当把左右border颜色设置为透明，border-top不设置时，就可以生成一个向上的三角形了。