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
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="a">
    <div class="top"></div>
     <div class="right-corner"></div>
    <div class="right"></div>
    <div class="bottom-corner"></div>
    <div class="bottom"></div>
    <div class="left-corner"></div>
    <div class="left"></div>
    <div class="top-corner"></div>
    <div class="outer-top"></div>
  </div>
    
    
  <div class="outer">
    
    <div class="outer-right-corner"></div>
    
    <div class="outer-right"></div>
    
   <div class="outer-right-4">
    </div>
    
    <div class="outer-right-dop">
    </div>
    </div>
  
    <div class="a a4">
    <div class="top"></div>
     <div class="right-corner"></div>
    <div class="right"></div>
    <div class="bottom-corner"></div>
    <div class="bottom"></div>
    <div class="left-corner"></div>
    <div class="left"></div>
    <div class="top-corner"></div>
    <div class="outer-top"></div>
  </div>
  
  <div class="outer">
    
    
    
    <div class="outer-right"></div>
    
   <div class="outer-right-4">
    </div>
    
    <div class="outer-right-dop">
    </div>
    </div>
  
   
    <div class="a a4">
    <div class="top"></div>
     <div class="right-corner"></div>
    <div class="right"></div>
    <div class="bottom-corner"></div>
    <div class="bottom"></div>
    <div class="left-corner"></div>
    <div class="left"></div>
    <div class="top-corner"></div>
    <div class="outer-top"></div>
  </div>
  
</body>
</html>
 
* {
  margin:0;
  padding:0;
}
​
body {
  margin:0px 0 0 50px;
}
​
​
div {
  
}
​
.a, .outer {
  width:204px;
  height:292px;
  position:relative;
 
  padding:5px;
}
​
.a4 {
  margin-left:-17px;
  margin-top:63px;
}
​
.outer {
  margin-top:-302px;
}
​
.top,.right-corner,.right,.bottom-corner,
.bottom,.left-corner,.left,.top-corner,
.outer-top, .outer-right-corner,
.outer-right, .outer-right-4,
.outer-right-dop{
  position:absolute;
  background-image:url(http://comps.canstockphoto.com/can-stock-photo_csp2136532.jpg);
  
  background-repeat:no-repeat;
}
​
.top {
  
  top:97px;
  left:55px;
  width:104px;
  height:47px;
  background-position:-4px -250px;
}
​
.right-corner {
  
  top:97px;
  left:159px;
  width:50px;
  height:47px;
  background-position:-132px -123px;
}
​
.right {
  
  top:144px;
  left:159px;
  width:50px;
  height:103px;
  background-position:-43px -4px;
}
​
.bottom-corner {
  
  
  top:247px;
  left:159px;
  width:50px;
  height:50px;
  background-position:-131px -197px;
}
​
.bottom {
  
  top:247px;
  left:55px;
  width:104px;
  height:50px;
  background-position:-4px -246px;
}
​
.left-corner {
  
  top:247px;
  left:5px;
  width:50px;
  height:50px;
  background-position: -59px -197px;
}
​
.left {
 
  top:52px;
  left:5px;
  width:50px;
  height:195px;
  background-position:1px -4px;
}
​
.top-corner {
  
  top:5px;
  left:5px;
  width:50px;
  height:47px;
  background-position: -59px -123px;
}
​
.outer-top {
  top:5px;
  left:55px;
  width:197px;
  height:47px;
  background-position: -4px -305px;
}
​
.outer-right-corner {
  top:5px;
  left:252px;
  width:50px;
  height:47px;
  background-position:-132px -123px;
}
​
.outer-right {
  
  top:52px;
  left:252px;
  width:50px;
  height:195px;
  background-position:3px -4px;
}
​
.outer-right-4 {
  top:247px;
  left:252px;
  width:50px;
  height:103px;
  background-position:-43px -4px;
}
​
.outer-right-dop {
  
   top: 350px;
   left:234px;
   width:70px;
   height:86px;
   background-position: -205px -12px;
}
​
​
​
​
​
​
​
​
​
​
​
Output 300px

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

Dismiss x
public
Bin info
dmkimpro
0viewers