用 CSS 設計出三角形圖案

傳統的網頁設計在網頁內添加三角形圖案必須使用圖案設計的方式來加入,也就是先用繪圖軟體畫好一個三角形,然後才能加入到網頁中,除了設計花時間之外,檔案還要上傳到伺服器,後續維護也比較麻煩,CSS 的出現改變了這種傳統的設計方式,允許網頁設計師用 CSS 語法直些設計出想要的三角形,只要寫好 CSS 程式碼就可以顯示,要修改三角形的顏色或比例都很簡單,用 CSS 設計出三角形圖案的優點比傳統的設計方式好太多了,而且語法非常的簡潔,這也是 CSS 好玩的地方。

設計概念

用 CSS 設計出三角形圖案會用到的就是元素邊框(border)的設計概念,一個元素會有四個邊框,每個邊框之間是呈現 45 度夾角,像下方呈現的這樣子。

我們利用這個特性,讓其中一個邊的邊框消失,對稱的兩邊設為相同的顏色,剩下的一個邊設為要顯示的顏色與長度就會顯示我們要的三角形了,以下的實際操作範例可以看得更清楚一點。

用 CSS 設計出三角形圖案實際範例
<style>
#T1 {
border-right: 15px solid white;
border-left: 15px solid white;
border-bottom: 25px solid blue;
display:inline-block;
}
#T2 {
border-top: 15px solid white;
border-bottom: 15px solid white;
border-left: 25px solid blue;
display:inline-block;
}
#T3 {
border-right: 15px solid white;
border-left: 15px solid white;
border-top: 25px solid blue;
display:inline-block;
}
#T4 {
border-top: 15px solid white;
border-bottom: 15px solid white;
border-right: 25px solid blue;
display:inline-block;
}
</style>
<div id="T1"></div>
<div id="T2"></div>
<div id="T3"></div>
<div id="T4"></div>
範例的輸出效果
範例中總共準備了四個三角形,分別是向上的三角形、向右的三角形、向下的三角形以及向左的三角形,從範例的 CSS 語法中,各位讀者可以清楚的看到少寫出來的那個邊就是三角形的尖端,因為沒寫語法出來,瀏覽器自動將那個邊視為無邊框,如果想修改三角形的形狀,讓它變得稍微長一點或短一點也可以,只要調整底邊框的長度即可,自己嘗試修改看看。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C