css四向箭头

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>test</title>
  6 </head>
  7 <style>
  8     i.arrows{
  9         display: block;
 10         width: 16px;
 11         height: 16px;
 12     }
 13     /*向上箭头*/
 14     .arrowsUp{
 15          position: relative;
 16     }
 17     .arrowsUp:before,.arrowsUp:after{
 18          position: absolute;
 19          content: '';
 20          border-top: 8px transparent dashed;
 21          border-left: 8px transparent dashed;
 22          border-right: 8px transparent dashed;
 23          border-bottom: 8px #fff solid;
 24     }
 25     .arrowsUp:before{
 26          border-bottom: 8px #0099CC solid;
 27     }
 28     .arrowsUp:after{
 29          top: 4px; /*覆盖并错开1px*/
 30          border-bottom: 8px #fff solid;
 31     } 
 32     /* 向下箭头 */
 33     .arrowsDown{
 34          position: relative;
 35     }
 36     .arrowsDown:before,.arrowsDown:after{
 37          position: absolute;
 38          content: '';
 39          border-top: 8px #fff solid;
 40          border-left: 8px transparent dashed;
 41          border-right: 8px transparent dashed;
 42          border-bottom: 8px transparent dashed;
 43     }
 44     .arrowsDown:before{
 45          border-top: 8px #0099CC solid;
 46     }
 47     .arrowsDown:after{
 48          bottom: 4px; /*覆盖并错开1px*/
 49          border-top: 8px #fff solid;
 50     }
 51     /*向左箭头*/
 52     .arrowsLeft{
 53          position: relative;
 54     }
 55     .arrowsLeft:before,.arrowsLeft:after{
 56          position: absolute;
 57          content: '';
 58          border-top: 8px transparent dashed;
 59          border-left: 8px transparent dashed;
 60          border-right: 8px #fff solid;
 61          border-bottom: 8px transparent dashed;
 62     }
 63     .arrowsLeft:before{
 64          border-right: 8px #0099CC solid;
 65     }
 66     .arrowsLeft:after{
 67          left: 4px; /*覆盖并错开1px*/
 68          border-right: 8px #fff solid;
 69     } 
 70     /* 向右箭头 */
 71     .arrowsRight{
 72          position: relative;
 73     }
 74     .arrowsRight:before,.arrowsRight:after{
 75          position: absolute;
 76          content: '';
 77          border-top: 8px transparent dashed;
 78          border-left: 8px #fff solid;
 79          border-right: 8px transparent dashed;
 80          border-bottom: 8px transparent dashed;
 81     }
 82     .arrowsRight:before{
 83          border-left: 8px #0099CC solid;
 84     }
 85     .arrowsRight:after{
 86          right: 4px; /*覆盖并错开1px*/
 87          border-left: 8px #fff solid;
 88     }
 89 </style>
 90 <body>
 91     
 92     <div class="item">
 93         <i class="arrows arrowsDown"></i>
 94     </div>
 95     <div class="item">
 96         <i class="arrows arrowsLeft"></i>
 97     </div>
 98     <div class="item">
 99         <i class="arrows arrowsUp"></i>
100     </div>
101     <div class="item">
102         <i class="arrows arrowsRight"></i>
103     </div>
104 </body>
105 </html>
猜你喜欢
