在網路上發現一篇文章 CSS Border Art，講的是用邊線組圖的方法，其中有幾幅令人讚嘆的作品。此練習參考 Slants，示範一些簡單的圖案做法。第一個範例顯示將 width, height 都設為 0px，就可以製成方形。其中 line-height:0px 必須設，否則 IE6 無法產生方形。
- 風格用法：
<style type='text/css'>
.b1 {border-top:solid 40px maroon;
border-right:solid 40px white;
border-bottom:solid 40px aqua;
border-left:solid 40px gold;
line-height:0px;
margin-right:20px;
float:left;
}
</style>
<div class=b1 style='width:120px; height:120px'></div>
<div class=b1 style='width:60px; height:60px'></div>
<div class=b1 style='width:0px; height:0px;'></div>
<br clear=all /><br /> - 執行結果：
三角形的做法。上例中的第三圖是作圖的基礎，只要將部分邊線的顏色改為 transparent 就可作出三角形。由於 IE6 不支援 transparent，請用背景色取代 transparent。
- 風格用法：
<style type='text/css'>
.b2 {border-style:solid;
border-width:40px;
line-height:0px;
margin-right:20px;
width:0px;
height:0px;
float:left;
}
</style>
<div class=b2 style='border-color:gray blue blue gray'></div>
<div class=b2 style='border-color:transparent blue blue transparent'></div>
<div class=b2 style='border-color:black blue blue black'></div>
<br clear=all /><br /> - 執行結果：
梯形的做法。
- 風格用法：
<style type='text/css'>
.b3 {border-style:solid;
border-color:blue gray blue gray;
line-height:0px;
margin-right:10px;
width:0px;
height:0px;
float:left;
}
</style>
<div class=b3 style='border-width:40px'></div>
<div class=b3 style='border-width:10px 40px 70px 40px'></div>
<div class=b3 style='border-width:0px 20px 60px 80px;
border-color:blue transparent blue transparent'></div>
<div class=b3 style='border-width:0px 20px 60px 80px;
border-color:blue blue blue transparent'></div>
<div class=b3 style='border-width:0px 40px 80px 40px;
border-color:blue transparent blue transparent;
width:40px'></div>
<div class=b3 style='border-width:0px 40px 80px 40px;
border-color:blue black blue black;
width:40px'></div>
<br clear=all /><br /> - 執行結果：
直線的做法。這需要將兩個 DIV 疊在一起，才能畫出直線。IE6 不支援 transparent 所以無法作出直線。
- 風格用法：
<style type='text/css'>
.lin {line-height:0px;
width:0px;
height:0px;
border-style:solid;
position:absolute;
top:0px;
left:0px;
border-color:transparent;
}
</style>
<div style='position:relative'>
<div class="lin" style="position:static;border-left-color:blue;border-width:0px 0px 51px 101px;"></div>
<div class="lin" style="position:static;border-left-color:gray;border-width:0px 0px 50px 100px;"></div>
</div>
<div style='position:relative'>
<div class="lin" style="border-left-color:blue;border-width:0px 0px 51px 101px;"></div>
<div class="lin" style="border-left-color:black;border-width:0px 0px 50px 100px;"></div>
</div> - 執行結果：
國王的畫像。作一個簡單的國王畫像。由於 IE6 沒有支援 transparent，所以畫像不完整。
- 風格用法：
<style type='text/css'>
.b4 {border-style:solid;
border-color:gold transparent gold transparent;
line-height:0px;
width:0px;
height:0px;
float:left;
}
</style>
<div class=b4 style='border-width:0px 40px 80px 0px;'></div>
<div class=b4 style='border-width:0px 20px 80px 20px;'></div>
<div class=b4 style='border-width:0px 20px 80px 20px;'></div>
<div class=b4 style='border-width:0px 0px 80px 40px;'></div>
<br clear=all>
<div class=b4 style='border-width:0px 80px 20px 80px;
border-color:gold gold gold gold;'></div>
<div style='width:160px; height:160px;
background:white; color:black;
font-size:20px; text-align:center;
line-height:20px;clear:both'>
<div class=b4 style='border-width:0px 40px 160px 0px;
border-bottom-color:black'></div>
<div class=b4 style='border-width:0px 0px 160px 40px;
border-bottom-color:black;float:right'></div>
<br />@ @<br /><br />L<br /><br />\__/
</div>
<br clear=all /><br /> - 執行結果：
@ @
L
\__/
有作品時，歡迎留言告知，讓大家欣賞一下。
- 相關文章：
- border art 的應用：背景圖。
- 房子。
