2009/03/05

邊線藝術

在網路上發現一篇文章 CSS Border Art,講的是用邊線組圖的方法,其中有幾幅令人讚嘆的作品。此練習參考 Slants,示範一些簡單的圖案做法。第一個範例顯示將 width, height 都設為 0px,就可以製成方形。其中 line-height:0px 必須設,否則 IE6 無法產生方形。

三角形的做法。上例中的第三圖是作圖的基礎,只要將部分邊線的顏色改為 transparent 就可作出三角形。由於 IE6 不支援 transparent,請用背景色取代 transparent。

梯形的做法

直線的做法。這需要將兩個 DIV 疊在一起,才能畫出直線。IE6 不支援 transparent 所以無法作出直線。



國王的畫像。作一個簡單的國王畫像。由於 IE6 沒有支援 transparent,所以畫像不完整。

有作品時,歡迎留言告知,讓大家欣賞一下

    相關文章:
  1. border art 的應用:背景圖
  2. 房子