用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭
發(fā)布時間：2017-10-16 10:42:39 作者：佚名 
我要評論
我要評論這篇文章主要介紹了用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭的相關(guān)資料,需要的朋友可以參考下
用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭，實現(xiàn)代碼如下所示：
/* css3三角形（向上 ▲） */
div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; /* 右透明 */
border-right:5px solid transparent; /*右透明 */
border-bottom:5px solid #2f2f2f; /* 定義底部顏色 */
font-size:0px;
line-height:0px;
}
/* css3三角形（向下 ▼） */
div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/* css3三角形（向左） */
div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-right:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
/* css3三角形（向右） */
div.arrow-rightright {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-left:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
總結(jié)
以上所述是小編給大家介紹的用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 本篇文章主要介紹了CSS3 用border寫 空心三角箭頭 (兩種寫法)，非常具有實用價值，需要的朋友可以參考下2017-09-29
- 這篇文章主要介紹了一款可自定義箭頭樣式的CSS3氣泡提示框，CSS氣泡提示框由純CSS完成，最大的特點就是可以自定義配置，包括文字顏色、背景顏色和箭頭方向等，想要擁有這款2016-03-16
一款基于純CSS的氣泡提示框，最大的特點就是可以自定義配置，包括文字顏色、背景顏色和箭頭方向等2016-03-16
純CSS3實現(xiàn)多種(上下、左右、轉(zhuǎn)彎)箭頭繪制插件源碼
今天要介紹的這款CSS3應(yīng)用也非常實用，利用它可以用純CSS3實現(xiàn)各種箭頭的繪制，包括左右箭頭、上下箭頭以及各個方向的轉(zhuǎn)彎箭頭2014-11-11
jQuery+CSS3實現(xiàn)帶有左右箭頭滑動切換效果的幻燈片
一款基于jQuery+CSS3實現(xiàn)的帶有左右箭頭，滑動切換效果的jQuery幻燈片2014-03-18
