利用css寫直角三角形

<style>
/*原理：第一步*/
.box1{
	width: 0;
	height: 0;
	border-top: 50px solid green;
	border-right: 50px solid red;
	border-bottom: 0px solid yellow; /*1.底邊去除就變成直角三角形*/
	border-left: 50px solid blue;
}

/*原理：第二步*/
.box2{
	width: 0;
	height: 0;
	border-top: 100px solid green; /*2.上邊拉長就會變成直接三角形*/
	border-right: 50px solid red;
	border-bottom: 0px solid yellow; /*1.底邊去除就變成直角三角形*/
	border-left: 50px solid blue;
}

/*實現*/
.box{
	width: 0;/*1.設置寬高為0*/
	height: 0;
	/*2.除右邊都變透明色，實邊*/
	border-color: transparent red transparent transparent;
	border-style: solid;
	border-width: 100px 50px 0 0; /*3.上邊寬100，右邊寬50，下左邊寬0*/

}
</style>
原理第一步，去除底邊寬度，實現等腰直角三角形：
<div class="box1"></div>
原理第二步，加寬上邊寬度，實現想要直角三角形：
<div class="box2"></div>
實現，把上邊，左邊邊變透明色：
<div class="box"></div>

效果：

原理第一步，去除底邊寬度，實現等腰直角三角形：

原理第二步，加寬上邊寬度，實現想要直角三角形：

實現，把上邊，左邊邊變透明色：