Ⅰ 如何用CSS控制div画三角形,圣诞树
新建文本文档】
在桌面新建一个文本文档,并命名为“三角形”,打开新建的文本文档,把html里的doctype、head、body等框架搭好。
【注意】可以在写完之后再重新重命名为.html文件。
2
【创建div并用border属性控制】
布局div,并命名id="tri",用CSS来控制div,在style里面,使用border属性对div进行控制,
#tri{
width: 0px;
height: 0px;
border-top: 400px solid red;
border-right: 400px solid blue;
border-bottom: 400px solid green;
border-left: 400px solid yellow;
}
【注意】div的长宽设为0,border为边框,会看到如下四个三角状的图形。
3
【修改并选择自己想要的三角形】
上述代码画的还不是三角形,但是是四个三角,只要将border周边的颜色变成白色就可以了,例如除了border-bottom: 100px solid green;其余全变为white,就会看到如下效果,当然你也可以根据自己需要来调整。
此外可以将border-top的像素设为0;其余两边也调小一点并且颜色设为白色,就会只看到底下的一个三角形了。
【注意】根据自己实际来挑选自己想要达到的效果。图一图二效果不同,就是border设定不同的原因。
4
代码如下仅做参考:
<!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>
#tri{
width: 0px;
height: 0px;
border-top: 0px solid white;
border-right: 100px solid white;
border-bottom: 400px solid green;
border-left: 100px solid white;
}
</style>
</head>
<body>
<div id="tri"></div>
</body>
</html>
END
画圣诞树
【画两个三角】
用上面三角形的基础,先画出两个大小不同三角形。
#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;
}
【利用浮动以及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;
}
【画树干】
再加入一个div名字为footer,控制其大小形状与颜色,并用margin调整期位置。
#footer{
width: 100px;
height: 200px;
background: gray;
margin-left: 150px;
}
最终,经过调整得到一课圣诞树。如下图所示
完整代码如下,仅做参考
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<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>
Ⅱ 在HTML中,如何用CSS画一棵圣诞树请高手指教
圣诞树啊,应该是考虑怎样画三角形吧,用border就可以了哈。
<!DOCTYPEhtml>
<html>
<head>
<title></title>
<styletype="text/css">
.ss{
height:0;
width:0;
position:absolute;
border:20pxsolidtan;
border-color:transparenttransparent#1fd224transparent;
}
.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>
<divclass="s1ss"></div>
<divclass="s2ss"></div>
<divclass="s3ss"></div>
<divclass="s4ss"></div>
<divclass="dd">
</div>
</body>
</html>
看着有点丑,楼主可以改变宽度高度以及颜色哈。最后希望采纳哈
Ⅲ VB 编写程序 打印圣诞树图案
tab表示需要先空几格再开始print
Private Sub Command1_Click()
'第一个三角形树叶3行
For i = 1 To 3
Print Tab(20 - j);
For j = 1 To 2 * i - 1
Print "▲";
Next j
Next i
'第二个三角形树叶5行
For m = 1 To 5
Print Tab(20 - n);
For n = 1 To 2 * m - 1
Print "▲";
Next n
Next m
'第三个三角形树叶7行
For f = 1 To 7
Print Tab(20 - g);
For g = 1 To 2 * f - 1
Print "▲";
Next g
Next f
'树根,4行,每行打印2个三角形
For k = 1 To 4
Print Tab(19); "▲▲"
Next k
End Sub