用CSS画三角形，圣诞树

<html>
	<head>
		<style type="text/css">
			#main1{
				width: 1000px;
				height: 500px;
				background-color: gray;
			}

			#triangle{
				width: 200px;
				height: 200px;
				border-top: 100px solid red;
				border-right: 100px solid blue;
				border-bottom: 100px solid green;
				border-left: 100px solid yellow;
				float:left;
			}
			#triangle2{
				width: 200px;
				height: 200px;
				border-top: 50px solid red;
				border-right: 50px solid blue;
				border-bottom: 50px solid green;
				border-left: 50px solid yellow;
				float:left;
				margin-left: 50px;
			}


			#triangle3{
				width: 0px;
				height: 100px;
				border-top: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid green;
				border-left: 50px solid transparent;
				float:left;
				margin-left: 50px;
			}

			#main2 {
				width: 1000px;
				height: 500px;
				background-color: gray;
			}

			

			#a1{
				width: 0px;
				height: 0px;
				border-top: 0px solid transparent;
				border-right: 70px solid transparent;
				border-bottom: 50px solid green;
				border-left: 70px solid transparent;
				margin-left: 80px;
			}

			#a2{
				width: 0px;
				height: 0px;
				border-top: 0px solid transparent;
				border-right: 100px solid transparent;
				border-bottom: 70px solid green;
				border-left: 100px solid transparent;
				margin-left: 50px;
				margin-top: 10px;
			}
			#a3{
				width: 0px;
				height: 0px;
				border-top: 0px solid transparent;
				border-right: 120px solid transparent;
				border-bottom: 80px solid green;
				border-left: 120px solid transparent;
				margin-left: 28px;
				margin-top: 10px;
			}

			#a4 {
				width: 50px;
				height: 200px;
				background-color: green;
				margin-left: 120px;
				margin-top: 8px;
			}
		</style>

	</head>
	<body>
		<div id="main1">
			<div id="triangle"></div>
			<div id="triangle2"></div>
			<div id="triangle3"></div>
		</div>
		<div id="main2">
			<div id="a1"></div>
			<div id="a2"></div>
			<div id="a3"></div>
			<div id="a4"></div>
		</div>
	</body>

</html>
用CSS画三角形，圣诞树

猜你喜欢
