2014
09
15

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

關鍵字:純css三角形CSS

製作網頁的時候常會使用一些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;
}
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所