Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <body>
       <div class="arrow-down"></div>
      <div class="arrow-up"></div>
     
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>
      
    </body>
</html>
 
  .arrow-up {
        
      position : absolute;
      top : 150px;
      width: 150px; 
        height: 0; 
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
        border-bottom: 60px solid black;
    }
  .arrow-up:hover{
    border-bottom: 60px solid red;
}
    
    .arrow-down {
       position : absolute;
      top : 90px;  
      width: 150px; 
        height: 0; 
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
        
        border-top: 60px solid blueviolet;
    }
    .arrow-down:hover{
    border-top: 60px solid red;
    }
    .arrow-right {
        position : absolute;
       top : 90px;
      width: 0; 
        height: 0; 
        border-top: 60px solid transparent;
        border-bottom: 60px solid transparent;
        
        border-left: 60px solid green;
    }
    .arrow-right:hover{
    border-left: 60px solid red;
    }
    
    .arrow-left {
        position : absolute;
       top : 90px;
      left : 217px;
      width: 0; 
        height: 0; 
        border-top: 60px solid transparent;
        border-bottom: 60px solid transparent; 
        border-right:60px solid blue; 
    }
    
    .arrow-left:hover{
    border-right: 60px solid red;
    }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers