Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created August 26, 2012 13:20
Show Gist options
  • Save anonymous/3479195 to your computer and use it in GitHub Desktop.
Save anonymous/3479195 to your computer and use it in GitHub Desktop.
Download ZIP
div with irregular shapes with css3 and html5 (SO)
Raw
dabblet.css
/**
* div with irregular shapes with css3 and html5 (SO)
* http://stackoverflow.com/questions/12126731/div-with-irregular-shapes-with-css3-and-html5/12128398#12128398
*/
div { box-sizing: border-box; }
.container {
overflow: hidden;
width: 60em;
height: 60em;
margin: 5.6em auto 0;
background: silver;
}
.grid {
transform: skewX(-45deg)
rotate(15deg)
scaleX(1.785) scaleY(.8)
translateX(35em) translateY(4em);
}
.grid-row {
width: 32em;
}
.grid-cell {
float: left;
width: 2em;
height: 2em;
}
.high {
box-shadow: .2em .2em 0 dimgrey;
background: gainsboro;
}
.red {background-color: #d80000;}
.skin { background-color: #f8ab00;}
.brown { background-color: #706800;}
.high:hover {
background: whitesmoke;
}
Raw
dabblet.html
<div class='container'>
<div class='grid'>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin brown'></div>
<div class='grid-cell high skin brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin brown'></div>
<div class='grid-cell high skin brown'></div>
<div class='grid-cell high skin brown'></div>
<div class='grid-cell high skin brown'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell high skin'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell high red'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell high brown'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment