使用纯HTML和CSS绘制圣诞树：打造网页中的冬日奇景

HTML & CSS 实现节日圣诞树：一步步打造你的冬季主题网页

在这篇文章中，我们将使用纯HTML和CSS创建一棵节日圣诞树。通过简单的代码，您可以在网页上实现一棵带有星星、彩球装饰的圣诞树，为网站增添节日氛围。

实现思路

**树结构**：利用CSS的`border`属性绘制不同大小的三角形来组成圣诞树的分层结构。
**树干**：使用一个小矩形模拟树干，增加圣诞树的稳定感。
**装饰星星**：用金色字体绘制顶部的星星，吸引眼球。
**彩球装饰**：在树上添加不同颜色的圆形装饰球，让页面更具节日氛围。

代码实现

以下是完整的HTML和CSS代码：

```html

<!DOCTYPE html>

<head>

<title>Festive Christmas Tree</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background: linear-gradient(to bottom, #001f3f, #1d1d1d);

color: white;

font-family: 'Arial', sans-serif;

}

.tree {

position: relative;

width: 0;

height: 0;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

border-bottom: 100px solid #0a6b08;

margin-top: 20px;

}

.tree:before,

.tree:after {

content: '';

position: absolute;

left: -40px;

width: 0;

height: 0;

border-left: 80px solid transparent;

border-right: 80px solid transparent;

}

.tree:before {

top: -70px;

border-bottom: 120px solid #096508;

}

.tree:after {

top: -140px;

border-bottom: 140px solid #085507;

}

.trunk {

width: 30px;

height: 50px;

background-color: #4a2a0a;

margin: -15px auto 0;

}

.star {

position: absolute;

top: -170px;

left: -10px;

font-size: 35px;

color: gold;

}

.ornament {

position: absolute;

width: 12px;

height: 12px;

border-radius: 50%;

}

.ornament:nth-child(2) { top: -130px; left: -20px; background-color: red; }

.ornament:nth-child(3) { top: -110px; left: 40px; background-color: yellow; }

.ornament:nth-child(4) { top: -90px; left: -30px; background-color: blue; }

.ornament:nth-child(5) { top: -60px; left: 20px; background-color: purple; }

.ornament:nth-child(6) { top: -40px; left: 50px; background-color: pink; }

.ornament:nth-child(7) { top: -120px; left: -50px; background-color: cyan; }

</style>

</head>

<body>

</div>

</body>

</html>