【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;
}

                                                          此時得到紅色、黑色兩個直角三角形。