html如何制作圣诞树,怎么用css画圣诞树？

html与css学习过程中会遇到各种各样的问题，当然也有很多有趣的实战应用，今天与大家分享如何用css来控制div画三角形，进一步画出圣诞树。

画圣诞树，我们首先需要会用css画三角形，(相关推荐：如何用css3画三角形)。

学会了画三角形，我们就可以开始画圣诞树了。

用css画圣诞树的步骤：

(1)画两个三角形，先画出两个大小不同三角形。#tri1{

width: 0px;

height: 0px;

border-top: 100px solid white;

border-right: 100px solid white;

border-bottom: 100px solid green;

border-left: 100px solid white;

}

#tri2{

width: 0px;

height: 0px;

border-top: 200px solid white;

border-right: 200px solid white;

border-bottom: 200px solid green;

border-left: 200px solid white;

}

(2)利用浮动以及margin调到合适位置

将第一个小三角形浮动起来，这样就覆盖到第2个上面，然后利用margin值调动位置，最终显示出圣诞树的上面内容，代码如下#tri1{

width: 0px;

height: 0px;

border-top: 100px solid white;

border-right: 100px solid white;

border-bottom: 100px solid green;

border-left: 100px solid white;

float: left;

margin-left: 100px;

}

#tri2{

width: 0px;

height: 0px;

border-top: 200px solid white;

border-right: 200px solid white;

border-bottom: 200px solid green;

border-left: 200px solid white;

}

(3)、画树干

再加入一个div名字为footer，控制其大小形状与颜色，并用margin调整期位置。#footer{

width: 100px;

height: 200px;

background: gray;

margin-left: 150px;

}

最终，经过调整得到一课圣诞树。如下图所示(推荐学习：CSS视频教程)

所有代码如下：

圣诞树练习

#header{

width: 0px;

height: 0px;

border-top: 100px solid white;

border-right: 100px solid white;

border-bottom: 100px solid green;

border-left: 100px solid white;

float: left;

margin-left: 100px;

}

#main{

width: 0px;

height: 0px;

border-top: 200px solid white;

border-right: 200px solid white;

border-bottom: 200px solid green;

border-left: 200px solid white;

}

#footer{

width: 100px;

height: 200px;

background: gray;

margin-left: 150px;

}

更多CSS3相关技术文章，请访问CSS3答疑栏目进行学习！