css four-way arrow

  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 is           border-bottom : 8px #fff Solid ; 
24      } 
25      .arrowsUp: before { 
26 is           border-bottom : 8px # 0099CC Solid ; 
27      } 
28      .arrowsUp: After { 
29           Top : 4px ;  / * Overwrite and shifted 1px * / 
30           border-bottom : 8px #fff Solid ; 
31 is      }  
32      / * down arrow * / 
33 is      .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 is      } 
44 is      .arrowsDown: before { 
45           border-Top : 8px # 0099CC Solid ; 
46 is      } 
47      .arrowsDown: After { 
48           bottom : 4px ;  / * Overwrite and shifted 1px * / 
49           border-Top : 8px #fff Solid ; 
50      } 
51      / * left arrow * / 
52 is      .arrowsLeft { 
53 is           position : relative ; 
54 is      } 
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>
Guess you like
