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

来源：互联网发布：如何出书知乎编辑：程序博客网时间：2024/05/04 18:55

<!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>

效果：

0 1