設計概念
用 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>
範例的輸出效果#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 語法中，各位讀者可以清楚的看到少寫出來的那個邊就是三角形的尖端，因為沒寫語法出來，瀏覽器自動將那個邊視為無邊框，如果想修改三角形的形狀，讓它變得稍微長一點或短一點也可以，只要調整底邊框的長度即可，自己嘗試修改看看。
延伸閱讀