CSS的边框属性绘制三角形

步骤

1. 把边框的宽和高设置为0
2. 设置边框大小，属性，颜色
3. 留一面有颜色的边框，其他设置为透明（transparent）
4. 可以不设置他对面的边框，

H5代码

		<div class="test1"></div>
		<div class="test2"></div>
		<div class="test3"></div>
		<br />
		<div class="test4"></div>

CSS

.test1{
				width:0px;
				height:0px;
				border-top:110px solid red;
				border-right:110px solid transparent;
				border-bottom:110px solid transparent;
				border-left:110px solid transparent;
			}
			.test2{
				width:0px;
				height:0px;
				border-top:110px solid transparent;
				border-right:110px solid transparent;
				border-bottom:110px solid transparent;
				border-left:110px solid blue;
			}
			.test3{
				width:0px;
				height:0px;
				border-top:110px solid transparent;
				border-right:110px solid transparent;
				border-bottom:110px solid yellow;
				border-left:110px solid transparent;
			}
			.test4{
				width:0px;
				height:0px;
				border-top:110px solid red;
				border-right:110px solid blue;
				border-bottom:110px solid yellow;
				border-left:110px solid greenyellow; 
			}

效果

为了方面截图，我设置了浮动。

如果我把第三个div的上边框注释，我的结果就会变成这样，也是个三角形，只是上去了。