阶段一/三角形.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="trangle1"></div>
		<div class="trangle2"></div>
		<div class="trangle3"></div>
		<div class="trangle4"></div>
		<div class="trangle5"></div>
	</body>
	<style>
		.trangle1 {
			width: 0;
			height: 0;
			border: 50px solid transparent;
			border-left: 50px solid red;
			border-bottom: 50px solid red;
		}

		.trangle2 {
			width: 0;
			height: 0;
			border: 50px solid transparent;
			border-right: 50px solid red;
			border-bottom: 50px solid red;
		}

		.trangle3 {
			width: 0;
			height: 0;
			border: solid 50px transparent;
			border-top: 50px solid blue;
			border-left: 50px solid blue;
		}

		.trangle4 {
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid red;
		}

		.trangle5 {
			width: 0;
			height: 0;
			border: 100px solid transparent;
			border-left: 50px solid pink;
		}
	</style>
</html>