用CSS画出三角形

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

1
2
3
4
#triangle{
	width:100px;
    height:100px;
}

结果如下：
alt text

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

1
2
3
4
5
6
7
8
#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;
}

结果如下

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

1
2
3
4
5
6
7
8
#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;
}

见证奇迹的时刻：
alt text

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

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid red;
	border-right: 50px solid yellow;
	border-bottom: 50px solid purple;
}

alt text

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

1
2
3
4
5
#triangle{
	width: 0px;
	height: 0px;
	border-bottom: 50px solid purple;
}

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

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid purple;
}

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

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid purple;
}

alt text
下三角形

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid red;
	border-bottom: 50px solid transparent;
	border-top: 50px solid transparent;
}

alt text
右三角形

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-right: 50px solid red;
	border-bottom: 50px solid transparent;
	border-top: 50px solid transparent;
}

alt text
左三角形