Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div class="arrow-top"></div>
  <div class="arrow-right"></div>
  <div class="arrow-bottom"></div>
  <div class="arrow-left"></div>
  
</body>
</html>
 
​
DIV {
  width: 0;
  height: 0;
  border: 50px solid transparent; 
  }
.arrow-top {
  border-top-color: orangered;  
  border-bottom: 0;
  border-right: 0;
  }
.arrow-right {
  border-right-color: gold;  
  border-left: 0;
  border-bottom: 0;
  
  }
.arrow-bottom {
  border-bottom-color: yellowgreen;  
  border-top: 0;
  border-left: 0;
  }
.arrow-left {
  border-left-color: steelblue;  
  border-right: 0;
  border-top: 0;
  }
​
​
BODY {
  background: white;
  }
DIV {
  display: inline-block;
  margin: 30px 10px;
  }
Output

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

Dismiss x