CSS画三角形

这里要用到边框属性：border

用法：

border: 1px solid #ccc;//宽度，实线，颜色

然后还可以分别设置上下左右边框样式：

border-right，border-left，border-top，border-buttom

在设置div宽度高度都为0，边框宽度不为0时：

#border_1{
				margin: 0 auto;/* 居中 */
				width: 0px;
				height: 0px;					
				border-right: 100px solid #73B4E7;				
				border-left:100px solid #73B4E7;
				border-top:100px solid #AAFFFF;				
				border-bottom:100px solid #AAFFFF;
			}

然后尝试将右边框注释掉：

#border_1{
				margin: 0 auto;/* 居中 */
				width: 0px;
				height: 0px;					
				/*border-right: 100px solid #73B4E7;*/				
				border-left:100px solid #73B4E7;
				border-top:100px solid #AAFFFF;				
				border-bottom:100px solid #AAFFFF;
			}

再将上边框和下边框设置为全透明：transparent

#border_1{
				margin: 0 auto;/* 居中 */
				width: 0px;
				height: 0px;					
				/*border-right: 100px solid #73B4E7;*/				
				border-left:100px solid #73B4E7;
				border-top:100px solid transparent;				
				border-bottom:100px solid transparent;
			}

三角形画好了！

其左边长 = 上边框宽度 + 下边框宽度
其高 = 左边框内宽度

如何得到一个直角三角形：

将上边框宽度设为0，或者将下边框宽度设置为0

#border_1{
				margin: 0 auto;/* 居中 */
				width: 0px;
				height: 0px;					
				/* border-right: 100px solid #73B4E7;*/		
				border-left:100px solid #73B4E7;
				border-top:0px solid transparent;	/* transparent为全透明*/			
				border-bottom:100px solid transparent;
			}

如何得到一个等边三角形：

根据计算，等边三角形的边比高为 2:√3
所以边长为200px时，高约为173.2px

#border_1{
				margin: 0 auto;/* 居中 */
				width: 0px;
				height: 0px;					
				/* border-right: 100px solid #73B4E7;*/		
				border-left:173.2px solid #73B4E7;
				border-top:100px solid transparent;	/* transparent为全透明*/			
				border-bottom:100px solid transparent;
			}