Skip to content

Instantly share code, notes, and snippets.

@kazu2012

kazu2012/dabblet.css

Created August 26, 2012 12:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kazu2012/3478396 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kazu2012/3478396 to your computer and use it in GitHub Desktop.
Download ZIP
div with irregular shapes with css3 and html5
Raw
dabblet.css
/**
* div with irregular shapes with css3 and html5
*/
div { box-sizing: border-box; }
.container {
overflow: hidden;
width: 32em;
height: 32em;
margin: 5.6em auto 0;
background: silver;
}
.grid {
transform: skewX(-45deg)
rotate(15deg)
scaleX(1.785) scaleY(.8)
translateX(7em) translateY(-4.5em);
}
.grid-row {
width: 32em;
}
.grid-cell {
float: left;
width: 2em;
height: 2em;
}
.high {
background: gainsboro;
}
.high:hover {
background: whitesmoke;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></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'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></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'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></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 high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment