HTML畫樹代碼
<!DOCTYPE html>
<html>
<head>
<title>HTML畫樹代碼</title>
<style>
tree {
position: relative;
display: block;
width: 0;
height: 0;
margin: 0 auto;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid green;
}
tree:before {
content: "";
position: absolute;
top: 0;
left: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid green;
transform: rotate(60deg);
}
tree:after {
content: "";
position: absolute;
top: 0;
left: 100px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid green;
transform: rotate(-60deg);
}</head>
<body>
<tree></tree>
</body>
</html>代碼解釋：
1. 首先定義tree樣式，設置其position為relative，寬度和高度為0，同時設置其中的border-left，border-right和border-bottom，用于畫出樹干和樹葉。
2. 使用:before偽元素實現樹葉的左邊部分，設置其為絕對定位，top和left確定其位置，并通過transform:rotate(60deg)旋轉使其呈現傾斜形態。
3. 使用:after偽元素實現樹葉的右邊部分，設置其為絕對定位，top和left確定其位置，并通過transform:rotate(-60deg)旋轉使其呈現傾斜形態。
4. 在HTML中使用tree標簽來呈現樹的形態，最后在body中插入tree標簽，即可畫出一棵樹。