不需圖片，純css也能做出三角形ICON

製作網頁的時候常會使用一些icon，像是照片輪播效果，前後常常會使用三角形箭頭來表示上一張與下一張照片，在這邊分享一個不需要使用圖片，css設定就能做出的三角形icon!
其實就是使用border的效果，先看這張圖感覺就會比較清楚了：


CSS設定：
width:80px;
height:80px;
border-left: 60px solid #FF99CC;
border-bottom: 60px solid #2D89EF;
border-right: 60px solid #339999;
border-top: 60px solid #6633FF;

當矩行寫上border，邊框設定比較粗的時候，其實是會往內縮的，所以如果想要向右的三角形，只要border-top、border-bottom寫和背景相同的顏色，border-left 寫三角形想要的顏色，就會像下圖一樣，出現三角形囉！


再加上滑鼠效果，變換顏色，就能當按鈕使用啦~


HTML：
＜div id="box"＞
＜a href="#" class="pre"＞＜/a＞
＜div class="pic"＞＜img src="images/pic_01a.jpg" width="400" height="100" border="0"＞＜/div＞
＜a href="#" class="next"＞＜/a＞
＜/div＞

CSS設定：
body {background-color:#F7F1EA; }
#box {width:440px; height:100px; }

/*左三角形*/
.pre {
float:left;
margin:35px 5px 0 0;
border-bottom:#F7F1EA 15px solid;
border-top:#F7F1EA 15px solid;
border-right:#CCCCCC 15px solid;
}

.pre:hover {
height:1px;
float:left;
margin:35px 5px 0 0;
border-bottom:#F7F1EA 15px solid;
border-top:#F7F1EA 15px solid;
border-right:#006666 15px solid;
}

/*圖片*/
.pic {width:400px; height:100px; float:left; }

/*右三角形*/
.next {
float:left;
margin:35px 0 0 5px;
border-bottom:#F7F1EA 15px solid;
border-top:#F7F1EA 15px solid;
border-left:#CCCCCC 15px solid;
}

.next:hover {
float:left;
margin:35px 0 0 5px;
border-bottom:#F7F1EA 15px solid;
border-top:#F7F1EA 15px solid;
border-left:#006666 15px solid;
}