Skip to content

Instantly share code, notes, and snippets.

@mismith

mismith/dabblet.css

Created January 21, 2013 23:54
Show Gist options
  • Save mismith/4590696 to your computer and use it in GitHub Desktop.
Save mismith/4590696 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
.triangle, .triangle:before, .triangle:after {
width: 4em; height: 4em;
border-radius: 20%;
}
.triangle {
overflow: hidden;
position: relative;
margin: 7em auto 0;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
cursor: pointer;
pointer-events: none;
}
.triangle:before, .triangle:after {
position: absolute;
background: orange;
pointer-events: auto;t: '';angem-iang
.triangle:before {
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%)
skewX(30deg) translateY(6.7%) scaleY(.866) translateX(-25%);
}
.triangle:after {
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%)
skewX(-30deg) translateY(6.7%) scaleY(.866) translateX(25%);
}
le:hover { overflow: visible; }
=
.triangle:hover:before, .triangle:hover:after { background: none; }
.triangle:hover, .triangle:hover:before, .triangle:hover:after {
border: dashed 1px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='triangle'></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment