<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class="arrow-left"> <!--向左的三角--> </div> <div class="arrow-right"> <!--向右的三角--> </div>
下面用CSS3分別實現向上、下、左、右的三角形
/*箭頭向上*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff; } /*箭頭向下*/ .arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc; } /*箭頭向左*/ .arrow-left { width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid yellow; } /*箭頭向右*/ .arrow-right { width:0; height:0; border-top:50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid green; }
箭頭朝向那個方向就不用寫他的border,在反方向設置顏色 其他方向上的透明度為0