【CSS】用CCS画三角形（含直角三角形）

原理：利用div的border属性变换得到三角形。

step1：首先画一个宽度、高度、边框都为50px的div，且边框颜色为四种不同颜色：

.triangle {
	height: 50px;
	width: 50px;
	border: 50px solid red;
	border-top-color: blue;
	border-right-color: black;
	border-bottom-color: green;
}

step2：可以看到，每个边框均为梯形，要想得到三角形，可以让梯形的上底等于零，即div的heigth=0，width=0：

.triangle {
	height: 0px;
	width: 0px;
	border: 50px solid red;
	border-top-color: blue;
	border-right-color: black;
	border-bottom-color: green;
}

step3：此时已得到四个三角形，把其中三个边框的颜色设置透明即可得到一个三角形，例如只保留上图红色三角形：

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

step4：如果想要得到直角三角形，只需把某一个边框的border-width设为0，例如把蓝色边框border-width设为0：

.triangle {
	height: 0px;
	width: 0px;
	border: 50px solid red;
	border-top-color: blue;
	border-right-color: black;
	border-bottom-color: green;
	border-top-width: 0px;
}

                                                          此时得到红色、黑色两个直角三角形。