如何用html+css做一颗圣诞树

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<meta charset="utf-8">
	<style type="text/css">
		
		.div1{
			
			border-style: solid;
			
			border-top-width: 0px;

			border-right-width: 20px;
			border-bottom-width: 50px;
			border-left-width: 20px;
			border-top-color: red;
			border-right-color: white;
			border-bottom-color: green;
			border-left-color: white;
			background: white;
			width: 0px;
			height: 0px;
		}
		.div2{
			
			border-style: solid;
		
			border-top-width: 0px;

			border-right-width: 20px;
			border-bottom-width: 50px;
			border-left-width: 20px;
			border-top-color: red;
			border-right-color: white;
			border-bottom-color: green;
			border-left-color: white;
			background: white;
			width: 0px;
			height: 0px;
		}
		.div3{
			
			
			margin-top-width: 0px;
		        margin: 0 16px;
			background: green;
			width:  10px;
			height: 50px;
		}
		
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	

</body>
</html>

效果图:


猜你喜欢

转载自blog.csdn.net/it_zxl001/article/details/79860599