web頁面左右雙向箭頭(利用CSS樣式和圖片)——20181130
阿新 • • 發佈：2018-12-06
1、顯示效果：（CSS樣式）
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style> .arrowLeft{ /*整個箭頭容器*/ width:40px; height:10px; display: inline-block; position: relative; /*相對定位*/ } .arrowLeft:before,.arrowLeft:after{ content: ''; border-color: transparent; /*偽元素邊框顏色為透明*/ border-style: solid; position: absolute; /*偽元素絕對定位*/ } .arrowLeft:after{ /*箭頭尾部的矩形*/ width: 60%; height: 2%; background-color:#D3D3D3; top: 5px; left: 0; } .arrowLeft:before{ /*箭頭三角形*/ border-right-color:#D3D3D3; border-width: 7px;/*箭頭的大小*/ left: -13px; top: 2px; } .arrowRight{ /*整個箭頭容器*/ width:40px; height:10px; display: inline-block; position: relative; /*相對定位*/ top: -9px; } .arrowRight:before,.arrowRight:after{ content: ''; border-color: transparent; /*偽元素邊框顏色為透明*/ border-style: solid; position: absolute; /*偽元素絕對定位*/ } .arrowRight:after{ /*箭頭尾部的矩形*/ width: 60%; height: 2%; background-color:#D3D3D3; top: 5px; left: 0; } .arrowRight:before{ /*箭頭三角形*/ border-left-color:#D3D3D3; border-width: 7px; left: 28px; top: 2px; } </style> </head> <body > <div> <div id="arrowLeft" class="arrowLeft"></div></br> <div id="arrowRight" class="arrowRight"></div> </div> </body> </html>
2、顯示效果（CSS樣式）
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style> .arrowLeft{ /*整個箭頭容器*/ width:40px; height:10px; display: inline-block; position: relative; /*相對定位*/ } .arrowLeft:before,.arrowLeft:after{ content: ''; border-color: transparent; /*偽元素邊框顏色為透明*/ border-style: solid; position: absolute; /*偽元素絕對定位*/ } .arrowLeft:after{ /*箭頭尾部的矩形*/ width: 60%; height: 3%; background-color:#D3D3D3; top: 5px; left: 0; } .arrowLeft:before{ /*箭頭三角形*/ border-right-color:#D3D3D3; border-width: 8px; left: -15px; top: 0; } .arrowRight{ /*整個箭頭容器*/ display: inline-block; position: relative; /*相對定位*/ } .arrowRight:before{ content: ''; border-color: transparent; /*偽元素邊框顏色為透明*/ border-style: solid; position: absolute; /*偽元素絕對定位*/ } .arrowRight:before{ /*箭頭三角形*/ border-left-color:#D3D3D3; border-width: 8px; left: 25px; top: -31px; } </style> </head> <body > <div> <div id="arrowLeft" class="arrowLeft"></div></br> <div id="arrowRight" class="arrowRight"></div> </div> </body> </html>
3、顯示效果（圖片：參考百度地圖）
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style> .routebox-revert-icon { position: absolute; left: 30px; top: 30px; width: 18px; height: 14px; background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/revert_9adb172.png); </style> </head> <body > <div class="routebox-revert-icon"></div> </body> </html>