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="wrap">
  <div class="box">
      <div class="tl"></div>
      <div class="tc"></div>
      <div class="tr"></div>
​
      <div class="lc"></div>
      <div class="rc"></div>
​
      <div class="bl"></div>
      <div class="bc"></div>
      <div class="br"></div>
​
    </div>
</div>
</body>
</html>
 
html, body {
  height: 100%;
}
.wrap {
  width: 50%;
  height: 50%;
  padding: 40px;
  left: 100px;
  top: 100px;
  position: absolute;
}
.box {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgba(255,255,0,.4);
}
.tl {
  position: absolute;
  left: -40px; top: -40px;
  background-color: #f00;
  width: 40px;height: 40px;
}
​
.tc {
  background-color: #0f0;
  height: 40px;
  position: absolute;
  width: 100%;
  top: -40px;
}
.tr {
  position: absolute;
  right: -40px; top: -40px;
  background-color: #f00;
  width: 40px;height: 40px;
​
}
.cb {
  position: absolute;
  right: -40px; top: -40px;
  background-color: #f00;
  width: 40px;height: 40px;
​
}
.bl {
  position: absolute;
  left: -40px; bottom: -40px;
  background-color: #f00;
  width: 40px;height: 40px;
​
}
.bc {
  background-color: #0f0;
  height: 40px;
  position: absolute;
  width: 100%;
  bottom: -40px;
​
}
​
.br {
  position: absolute;
  right: -40px; bottom: -40px;
  background-color: #f00;
  width: 40px;height: 40px;
  
}
​
.lc {
  background-color: #0f0;
  width: 40px;
  position: absolute;
  height: 100%; 
  left: -40px;
​
}
​
.rc {
  background-color: #0f0;
  width: 40px;
  position: absolute;
  height: 100%; 
  right: -40px;
  
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers