Make A Fancy Arrow Using CSS by rotating two sided border - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Arrow

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Arrow

Description

Make A Fancy Arrow Using CSS by rotating two sided border

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>

body{<!--   w  w w. j av  a2s  .c  o  m-->
   font-size: 25px; 
   color: blue;     
}
[class^=arr-]{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;
}
.arr-right {transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);}

      </style> 
 </head> 
 <body>
   This is 
  <i class="arr-right"></i> .arr-right 
  <br> This is 
  <i class="arr-left"></i> .arr-left 
  <br> This is 
  <i class="arr-up"></i> .arr-up 
  <br> This is 
  <i class="arr-down"></i> .arr-down  
 </body>
</html>

Related Tutorials