菜单 学习猿地 - LMONKEY

 怎么用css画圣诞树?

怎么用css画圣诞树?

LJ2016 profile image LJ2016 ・1 min read

画圣诞树,我们首先需要会用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; 
}

Snipaste_2020-01-08_17-51-04.png

(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视频教程

Snipaste_2020-01-08_17-52-18.png

所有代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>圣诞树练习</title>
<style>
#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;
}
</style>
</head>
<body>
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
</body>
</html>

评论 (0)