利用css创建一个三角形

1，首先，我们写一个border的应用
.box { width: 100px; height: 100px; border: 50px solid; border-color: red green gray black; }

会生成这样一个正方形，我们可以看到border的渲染不是正方形，而是梯形
2，如果把盒子高度设置为0

.box {
				width: 0px;
				height: 0px;
				border: 50px solid;
				border-color: red green gray black; 
			}

四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;
3，设置透明，只保留左边的三角形

.box {
				width: 0px;
				height: 0px;
				border: 50px solid;
				border-color: transparent transparent transparent red ; 
			}

这样就得到了我们想要的三角形，我们还可以把代码修改下：

.box {
				width: 0px;
				height: 0px;
				border: 50px solid transparent;
				border-left: 50px solid red ; 
			}