Skip to content

Instantly share code, notes, and snippets.

@jt3k

jt3k/index.html

Created March 19, 2015 13:21
Show Gist options
  • Save jt3k/3cd0cb9bf3250dbda261 to your computer and use it in GitHub Desktop.
Save jt3k/3cd0cb9bf3250dbda261 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/wazupudoni
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html,
body {
height: 100%;
}
.box {
padding: px;
left: 50px;
top: 50px;
width: 50%;
height: 50%;
position: relative;
background-color: rgba(255, 255, 0, 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;
}
</style>
</head>
<body>
<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>
<script id="jsbin-source-css" type="text/css">html, body {
height: 100%;
}
.box {
padding: px;
left: 50px;
top: 50px;
width: 50%;
height: 50%;
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;
}</script>
</body>
</html>
Raw
jsbin.wazupudoni.css
html,
body {
height: 100%;
}
.box {
padding: px;
left: 50px;
top: 50px;
width: 50%;
height: 50%;
position: relative;
background-color: rgba(255, 255, 0, 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment