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="flags">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="flags">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="flags">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  
</body>
</html>
 
.flags {
  white-space: nowrap;
  }
.flags:nth-child(2) {
  margin-left: -320px;
  }
.flags:nth-child(3) {
  margin-left: -160px;
  }
SPAN {
  display: inline-block;
  width: 160px;
  margin: 20px 0;
  border-top: 1px solid silver;
  }
SPAN {
  position: relative;
  }
  SPAN:before,
  SPAN:after {
    content: ""; 
    display: inline-block;
    position: relative;
    border: 25px solid transparent; 
    border-color: orangered;
    }
    SPAN:after {
    margin-left: 30px;
    border-color: gold;
    }
  SPAN:nth-child(4n+2):before {
    border-color: yellowgreen;
    }
  SPAN:nth-child(4n+2):after {
    border-color: orange;
    }
SPAN:nth-child(4n+3):before {
  border-color: mediumturquoise;
  }
SPAN:nth-child(4n+3):after {
  border-color: crimson;
  }
SPAN:nth-child(4n+4):before {
  border-color: gold;
  }
SPAN:nth-child(4n+4):after {
  border-color: steelblue;
  }
SPAN:before,
SPAN:after {
  border-bottom-color: transparent !important;
  }
BODY {
  overflow: hidden;
  background: white;
  }
​
Output

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

Dismiss x