Ⅰ 如何用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