Trash

　今夜はもうクリスマスの前夜なのですね。
　待機中の暇にあかせてクリスマスツリーっぽいものをCSSで描いてみました。何だか微妙だけど載せておきます。

　下記はインラインCSSでクリスマスツリーらしきものを表現しています。画像は使用していません。
　ツリーぽっく見えるかどうかはInternetExplorer8とFireFox3以上で確認しました。

　上記のツリーのソースは以下。
<div style="width: 1px; height: 100px; background-color: #004700; margin: 15px 50px 0; padding: 1px; position: relative; color: #DDF1F0; font-size: 13px; font-family: 'Times New Roman',Times,serif;"><span style="width: 0; height: 0; line-height: 0; border-right: none; position: absolute;border-bottom: 50px solid #004700; border-left: 50px solid #FFFFFF; bottom: 10%; left: -50px;"></span><span style="width: 0; height: 0; line-height: 0; border-right: none; position: absolute;border-bottom: 30px solid #004700; border-left: 40px solid #FFFFFF; bottom: 35%; left: -40px;"></span><span style="width: 0; height: 0; line-height: 0; border-right: none; position: absolute;border-bottom: 40px solid #004700; border-left: 30px solid #FFFFFF; top: 5%; left: -30px;"></span><span style="width: 0; height: 0; line-height: 0; border-right: none; position: absolute;border-bottom: 20px solid #004700; border-left: 20px solid #FFFFFF; top: 1px; left: -20px;"></span><span style="width: 0; height: 0; line-height: 0; border-right: none; position: absolute;border-bottom: 50px solid #004700; border-right: 50px solid #FFFFFF; bottom: 10%; right: -50px;"></span><span style="width: 0; height: 0; line-height: 0; border-right: none; position: absolute;border-bottom: 30px solid #004700; border-right: 40px solid #FFFFFF; bottom: 35%; right: -40px;"></span><span style="width: 0; height: 0; line-height: 0; border-right: none; position: absolute;border-bottom: 40px solid #004700; border-right: 30px solid #FFFFFF; top: 5%; right: -30px;"></span><span style="width: 0; height: 0; line-height: 0; border-right: none; position: absolute;border-bottom: 20px solid #004700; border-right: 20px solid #FFFFFF; top: 1px; right: -20px;"></span><span style="color: #FF9900; font-size: 20px; font-family: メイリオ,Meiryo,'ＭＳ ゴシック',sans-serif; top: -15px; left: -10px; position: absolute;">★</span><span style="top: 10%; left: -10px; position: absolute; text-decoration: blink;">*</span><span style="top: 20%; left: 8px; position: absolute;">*</span><span style="top: 30%; left: -20px; position: absolute;">*</span><span style="top: 40%; left: 10px; position: absolute; text-decoration: blink;">*</span><span style="bottom: 40%; left: -10px; position: absolute;">*</span><span style="bottom: 30%; left: 20px; position: absolute;">*</span><span style="bottom: 20%; left: 0px; position: absolute;">*</span><span style="bottom: 10%; left: 30px; position: absolute;">*</span><span style="bottom: 5%; left: -20px; position: absolute;">*</span></div>

　インラインではなく外部CSSにしたのは以下。
.tree {
width: 1px;
height: 100px;
background-color: #004700;
margin: 15px 50px 0;
padding: 1px;
position: relative;}

.tree .leaf {
width: 0;
height: 0;
line-height: 0;
border-right: none;
position: absolute;}

.tree .left1 {
border-bottom: 50px solid #004700;
border-left: 50px solid #FFFFFF;
bottom: 10%;
left: -50px;}

.tree .left2 {
border-bottom: 30px solid #004700;
border-left: 40px solid #FFFFFF;
bottom: 35%;
left: -40px;}

.tree .left3 {
border-bottom: 40px solid #004700;
border-left: 30px solid #FFFFFF;
top: 5%;
left: -30px;}

.tree .left4 {
border-bottom: 20px solid #004700;
border-left: 20px solid #FFFFFF;
top: 1px;
left: -20px;}

.tree .right1 {
border-bottom: 50px solid #004700;
border-right: 50px solid #FFFFFF;
bottom: 10%;
right: -50px;}

.tree .right2 {
border-bottom: 30px solid #004700;
border-right: 40px solid #FFFFFF;
bottom: 35%;
right: -40px;}

.tree .right3 {
border-bottom: 40px solid #004700;
border-right: 30px solid #FFFFFF;
top: 5%;
right: -30px;}

.tree .right4 {
border-bottom: 20px solid #004700;
border-right: 20px solid #FFFFFF;
top: 1px;
right: -20px;}

.tree .star {
color: #FF9900;
font-size: 20px;
font-family: "メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
top: -15px;
left: -10px;
position: absolute;}

.tree .snow {
color: #DDF1F0;
font-size: 13px;
font-family: "Times New Roman",Times,serif;
position: absolute;}

.tree .flake1 {
top: 10%;
left: -10px;
text-decoration: blink;}

.tree .flake2 {
top: 20%;
left: 8px;}

.tree .flake3 {
top: 30%;
left: -20px;}

.tree .flake4 {
top: 40%;
left: 10px;
text-decoration: blink;}

.tree .flake5 {
bottom: 40%;
left: -10px;}

.tree .flake6 {
bottom: 30%;
left: 20px;}

.tree .flake7 {
bottom: 20%;
left: 0px;}

.tree .flake8 {
bottom: 10%;
left: 30px;}

.tree .flake9 {
bottom: 5%;
left: -20px;}
<div class="tree">
<span class="left1 leaf"></span>
<span class="left2 leaf"></span>
<span class="left3 leaf"></span>
<span class="left4 leaf"></span>
<span class="right1 leaf"></span>
<span class="right2 leaf"></span>
<span class="right3 leaf"></span>
<span class="right4 leaf"></span>
<div class="star">★</div>
<span class="snow flake1">*</span>
<span class="snow flake2">*</span>
<span class="snow flake3">*</span>
<span class="snow flake4">*</span>
<span class="snow flake5">*</span>
<span class="snow flake6">*</span>
<span class="snow flake7">*</span>
<span class="snow flake8">*</span>
<span class="snow flake9">*</span>
</div>