在編寫HTML和CSS的過程中，我們經常需要創建各種形狀和布局的元素。有時候，我們也想在頁面中添加一些趣味性的東西，比如樹形彩蛋。

<div class="tree-wrap">
<div class="tree">
<div class="leaves"></div>
<div class="trunk"></div>
</div>
</div>

上述代碼是創建一個基本的樹形元素。其中，我們使用了一個包裹元素（class="tree-wrap"）來實現元素的定位和包裹。樹干部分由一個矩形元素（class="trunk"）構成，而樹葉由一個橢圓形元素（class="leaves"）構成。

.tree {
position: relative;
}
.trunk {
width: 20px;
height: 60px;
background: #8B4513;
border-radius: 5px;
position: absolute;
bottom: 0;
left: calc(50% - 10px);
}
.leaves {
width: 60px;
height: 60px;
background: green;
border-radius: 50%;
position: absolute;
bottom: 60px;
left: calc(50% - 30px);
}

上述代碼是創建了樹干和樹葉的樣式。其中，我們使用了定位（position）屬性來控制元素在頁面中的位置。樹干和樹葉的樣式通過設置寬度、高度、背景色和邊角半徑（border-radius）來實現。此外，通過bottom和left屬性以及calc函數，我們也成功實現了元素的相對定位。

以上便是一個簡單的html css樹形彩蛋的創建過程。在實際開發中，你可以根據需要添加更多的元素和樣式，以實現更加復雜有趣的效果。同時，也希望大家多嘗試，多探索，創造出更多有趣的效果。