平常在網頁中，經常會有空心箭頭，除了用圖片外，可以用css來實現。基本思路是，用css繪制兩個三角形，通過絕對定位讓兩三角形不完全重疊，例如制作向右的空心箭頭，位於前面的三角形border顏色是需要的顏色，后面的三角形border顏色與包裹它們的div背景色一致，然后設置前面三角形的left值比后者的left多1px，這樣就可容易生成空心箭頭，但是在ie8以下瀏覽器中，需要設置父元素和子元素的優先級，否則制作的三角形無法顯示。下面是使用css模擬空心箭頭的實現代碼，如果有錯誤或不完善的地方，歡迎指正。
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css制作空心的上下左右的箭頭</title> <style type="text/css"> *{ padding:0; margin:0; } .box{ width:100px; height:500px; margin:0 auto; border:1px solid red; background:white; } .arrow-box{ width:30px; height:30px; margin:20px auto; position:relative; } /*右箭頭*/ .right{ width:20px; height:20px; position:absolute; left:0; top:0; border:1px solid blue; } .right-arrow1,.right-arrow2{ width:0; height:0; display:block; position:absolute; left:0; top:0; border-top:10px transparent dashed; border-right:10px transparent dashed; border-bottom:10px transparent dashed; border-left:10px white solid; overflow:hidden; } .right-arrow1{ left:1px;/*重要*/ border-left:10px blue solid; } .right-arrow2{ border-left:10px white solid; } /*左箭頭*/ .left{ width:20px; height:20px; position:absolute; left:0; top:0; z-index: 2;/*兼容ie8-*/ border:1px solid blue; } .left-arrow1,.left-arrow2{ width:0; height:0; display:block; position:absolute; left:0; top:0; z-index:5;/*兼容ie8-*/ border-top:10px transparent dashed; border-left:10px transparent dashed; border-bottom:10px transparent dashed; border-right:10px white solid; overflow:hidden; } .left-arrow1{ border-right:10px blue solid; } .left-arrow2{ left:1px;/*重要*/ border-right:10px white solid; } /*上箭頭*/ .top{ width:20px; height:20px; position:absolute; left:0; top:0; z-index: 2;/*兼容ie8-*/ border:1px solid blue; } .top-arrow1,.top-arrow2{ width:0; height:0; display:block; position:absolute; left:0; top:0; z-index: 5;/*兼容ie8-*/ border-top:10px transparent dashed; border-left:10px transparent dashed; border-right:10px transparent dashed; border-bottom:10px white solid; overflow:hidden; } .top-arrow1{ border-bottom:10px blue solid; } .top-arrow2{ top:1px;/*重要*/ border-bottom:10px white solid; } /*下箭頭*/ .bottom{ width:20px; height:20px; position:absolute; left:0; top:0; z-index: 2;/*兼容ie8-*/ border:1px solid blue; } .bottom-arrow1,.bottom-arrow2{ width:0; height:0; display:block; position:absolute; left:0; top:0; z-index: 5;/*兼容ie8-*/ border-bottom:10px transparent dashed; border-left:10px transparent dashed; border-right:10px transparent dashed; border-top:10px white solid; overflow:hidden; } .bottom-arrow1{ top:1px;/*重要*/ border-top:10px blue solid; } .bottom-arrow2{ border-top:10px white solid; } </style> <body> <div class="box"> <p> 右箭頭</p> <div class="arrow-right arrow-box"> <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b> </div> <p> 左箭頭</p> <div class="arrow-left arrow-box" > <b class="left"><i class="left-arrow1"></i><i class="left-arrow2"></i></b> </div> <p> 上箭頭</p> <div class="arrow-top arrow-box" > <b class="top"><i class="top-arrow1"></i><i class="top-arrow2"></i></b> </div> <p> 下箭頭</p> <div class="arrow-bottom arrow-box" > <b class="bottom"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b> </div> </div> </body> </html>
效果如下:
經測試,Chrome,FF,以及IE6+均正常。