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答疑栏目进行学习!
更多推荐
html如何制作圣诞树,怎么用css画圣诞树?
发布评论