跳到主要內容

利用CSS3寫出向左、向右的實心三角箭頭

/* 左箭頭 */
.block_arrow1:before {
position: absolute; 
left: 0px; 
width: 35px; 
height: 35px; 
-webkit-transform: translateX(-50%) rotate(45deg); 
transform: translateX(-50%) rotate(45deg); 
top: 45%;
background-color:#898989;
z-index: 9999;
visibility: inherit;
}
@media only screen and (max-width:767px){/* 手機版取消箭頭 */
.block_arrow1:before {display:none;}
}

/* 右箭頭 */
.block_arrow2:before {
position: absolute; 
left: 0px; 
width: 35px; 
height: 35px; 
-webkit-transform: translateX(-50%) rotate(45deg); 
transform: translateX(-50%) rotate(45deg); 
top: 45%;
background-color:#898989;
z-index: 9999;
visibility: inherit;
}
@media only screen and (max-width:767px){/* 手機版取消箭頭 */
.block_arrow2:before {display:none;}
}