利用CSS画一颗圣诞树（两个叶子，三叶标记未完成）

前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ

本文链接：https://blog.youkuaiyun.com/XZZ2222/article/details/52489861

本文介绍了一种使用CSS来绘制圣诞树的方法。通过设置不同大小的三角形边框颜色及位置，实现了圣诞树叶子和树干的效果。该方法适用于网页装饰等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用CSS画一颗圣诞树</title>
<style>
<span style="background-color: rgb(102, 204, 204);">#leaf1
{
width:0px;height:0px;top:10px;
border-top:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid green;
border-left:100px solid transparent;
float:left;
margin-left:100px;
}

#leaf2
{
width:0px;height:0px;
border-top:200px solid transparent;
border-right:200px solid transparent;
border-bottom:200px solid green;
border-left:200px solid transparent;
margin-top:-30px;
}

#trunk</span>
<span style="background-color: rgb(102, 204, 204);">{
width:30px;height:80px;
background:#663300;float:left;margin-left:180px;margin-top:0px;
}</span>

</style>

</head>

<body>
<span style="background-color: rgb(51, 204, 255);"><div id="leaf1"></div>
<div id="leaf2"></div>
<div id="trunk"></div>
</span>
</body>
</html>