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="wrapper">
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div>
  </div>
</body>
</html>
 
BODY {
  padding-top: 30px;
  background: white;
  text-align: center;
  }
DIV {
  position: relative;
  width: 20em;
  height: 18em;
  margin: 0 auto;
  }
.item {
  display: inline-block;
  width: 12em;
  height: 12em;
  margin: .2em;
  border-radius: 50%;
  vertical-align: middle;
  line-height: 12em;
  text-shadow: 1px 1px rgba(0%, 0%, 0%,.4);
  transform: rotate(45deg);
  box-shadow: inset 0 0 2.5em;
  }
.item:nth-child(1) {
  margin: 0 -3em -3em 0;
  background: hsla( 0, 90%, 65%, .7 );
  color: tomato;
  }
.item:nth-child(2) {
  margin: 0 0 -3em -3em;
  background: hsla( 60, 90%, 58%, .7 );
  color: orange;
  }
.item:nth-child(3) {
  margin: -3em -3em 0 0;
  background: hsla( 85, 90%, 50%, .7 );
  color: yellowgreen;
  }
.item:nth-child(4) {
  margin: -3em 0 0 -3em;
  background: hsla( 180, 60%, 50%, .5 );
  color: skyblue;
  }
Output

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

Dismiss x