HTML 代码实现一棵树 - 简单易懂的示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>一棵树</title>
	<style>
		.tree {
			width: 200px;
			height: 400px;
			background-color: #8DBE4B;
			position: relative;
			overflow: hidden;
			margin: 0 auto;
		}
		.trunk {
			width: 50px;
			height: 200px;
			background-color: #664D34;
			position: absolute;
			bottom: 0;
			left: 75px;
		}
		.branch {
			width: 200px;
			height: 100px;
			background-color: #8DBE4B;
			position: absolute;
			top: 0;
			border-radius: 50% 50% 0 0;
			transform-origin: bottom center;
			transform: rotate(45deg);
			z-index: 1;
		}
		.branch::before,
		.branch::after {
			content: "";
			width: 200px;
			height: 100px;
			background-color: #8DBE4B;
			position: absolute;
			top: 0;
			border-radius: 50% 50% 0 0;
			transform-origin: bottom center;
			transform: rotate(-90deg);
			z-index: 1;
		}
		.branch::before {
			left: -100px;
			transform: rotate(-135deg);
		}
		.branch::after {
			right: -100px;
			transform: rotate(-45deg);
		}
		.leaves {
			width: 300px;
			height: 300px;
			background-color: #8DBE4B;
			position: absolute;
			top: -50px;
			left: -50px;
			border-radius: 50%;
			transform-origin: center center;
			transform: scale(0.5);
			z-index: 2;
		}
		.leaves::before,
		.leaves::after {
			content: "";
			width: 300px;
			height: 300px;
			background-color: #8DBE4B;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50%;
			transform-origin: center center;
			transform: rotate(-90deg);
			z-index: 2;
		}
		.leaves::before {
			transform: rotate(-120deg);
		}
		.leaves::after {
			transform: rotate(-240deg);
		}
	</style>
</head>
<body>
	<div class='tree'>
		<div class='trunk'></div>
		<div class='branch'></div>
		<div class='leaves'></div>
	</div>
</body>
</html>