圣诞树啊，应该是考虑怎样画三角形吧，用border就可以了哈。
<!DOCTYPE html><html>
<head>
<title></title>
<style type="text/css">
.ss{
height: 0
width: 0
position: absolute
border: 20px solid tan
border-color: transparent transparent #1fd224 transparent
}
.s1{
border-width:80px
top: 100px
left: 400px
}
.s2{
border-width:100px
top: 115px
left: 382px
}
.s3{
border-width:120px
top: 126px
left: 362px
}
.s4{
border-width:140px
top: 140px
left: 342px
}
.dd{
height: 130px
width: 40px
position: absolute
top: 420px
left: 460px
background-color: #1fd224
}
</style>
</head>
<body>
<div class="s1 ss"></div>
<div class="s2 ss"></div>
<div class="s3 ss"></div>
<div class="s4 ss"></div>
<div class="dd">
</div>
</body>
</html>
看着有点丑，楼主可以改变宽度高度以及颜色哈。最后希望采纳哈
VSCode或者Hbuilder软件。根据酷库博客网资料显示，200行Html5+CSS3+JS代码可以实现动态圣诞树，推荐使用VSCode，在Hbuilder运行也是可行的。
代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。
圣诞树啊，应该是考虑怎样画三角形吧，用border就可以了哈。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ss{
height: 0
width: 0
position: absolute
border: 20px solid tan
border-color: transparent transparent #1fd224 transparent
}
.s1{
border-width:80px
top: 100px
left: 400px
}
.s2{
border-width:100px
top: 115px
left: 382px
}
.s3{
border-width:120px
top: 126px
left: 362px
}
.s4{
border-width:140px
top: 140px
left: 342px
}
.dd{
height: 130px
width: 40px
position: absolute
top: 420px
left: 460px
background-color: #1fd224
}
</style>
</head>
<body>
<div class="s1 ss"></div>
<div class="s2 ss"></div>
<div class="s3 ss"></div>
<div class="s4 ss"></div>
<div class="dd">
</div>
</body>
</html>
看着有点丑，楼主可以改变宽度高度以及颜色哈。最后希望采纳哈
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）