用CSS画出三角形

随着css3.0的出现，我们可以画出越来越多比较新颖的图形，这里我介绍一下用css3画出三角形。
首先我们给个div
<div id="triangle"></div>
下面就是我们的css代码，
先看个例子

#triangle{
    width:100px;
    height:100px;
}

结果如下：

很简单，然后呢，我们加上边框

#triangle{
    width: 100px;
    height: 100px;
    border-left: 50px solid red;
    border-right: 50px solid yellow;
    border-top: 50px solid gold;
    border-bottom: 50px solid purple;
}

结果如下

好像有奇迹了，如果我把div的宽高都设置为0，图像是否就会显示成四个三角形构成一个正方形，试一下

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid red;
    border-right: 50px solid yellow;
    border-top: 50px solid gold;
    border-bottom: 50px solid purple;
}

见证奇迹的时刻：

不过现在有了四个三角形，如果我们只要一个三角形的话怎么办？试着减一个边框看看

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid red;
    border-right: 50px solid yellow;
    border-bottom: 50px solid purple;
}

少了一个三角形，那么如果我取消另外两个边框会怎么样？

#triangle{
    width: 0px;
    height: 0px;
    border-bottom: 50px solid purple;
}

咦！怎么什么都没有，看来所有两个边界属性都删除是不行的，那如果我把它们隐藏呢：

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid purple;
}

上三角形就出现了，我们还可以写出其他三个方向的三角形

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid purple;
}

下三角形

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid red;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
}

右三角形

#triangle{
    width: 0px;
    height: 0px;
    border-right: 50px solid red;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
}

左三角形