用純CSS3實現(xiàn)網頁中常見的小箭頭，實現(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;} |
總結
以上所述是小編給大家介紹的用純CSS3實現(xiàn)網頁中常見的小箭頭，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
新聞熱點
疑難解答
