圣誕節快要到了，為了讓網站更具節日氣氛，我們可以在頁面中添加一顆華麗的圣誕樹。在CSS中，我們可以使用偽元素和背景圖來實現。

.tree {
position: relative;
width: 150px;
height: 200px;
background: url('tree.png');
background-size: contain;
}
.tree:before {
content: '';
position: absolute;
top: 20px;
left: 50%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid green;
transform-origin: bottom;
transform: translateX(-50%) rotate(-35deg);
}
.tree:after {
content: '';
position: absolute;
top: 45px;
left: 50%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform-origin: bottom;
transform: translateX(-50%) rotate(-60deg);
}
.tree .star {
position: absolute;
top: 10px;
left: 50%;
width: 0;
height: 0;
border-top: 20px solid yellow;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform: translateX(-50%) rotate(45deg);
}

在代碼中，我們首先創建一個類名為“tree”的元素，設置其寬度和高度，并設置背景圖為我們事先準備好的圣誕樹圖案。

接下來，我們使用偽元素:before和:after來分別創建圣誕樹的左右兩個部分，使用border屬性來設置三角形的大小和顏色，并利用transform屬性來旋轉角度和做出傾斜效果。最后，我們使用絕對定位和transform屬性創建了星星。

將這些元素放在一起，就可以得到一個漂亮的圣誕樹了！