Skip to content

Instantly share code, notes, and snippets.

@robertol
Created August 22, 2016 00:57
Show Gist options
  • Save robertol/7b61b8cbca5d2e86adeba9239999acc9 to your computer and use it in GitHub Desktop.
Save robertol/7b61b8cbca5d2e86adeba9239999acc9 to your computer and use it in GitHub Desktop.
CSS bar graph (SO)
/**
* CSS bar graph (SO)
*/
.graph {
width: 50px;
height: 50px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
.bar {
width: 8px;
margin: 1px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: baseline;
}
<!-- content to be placed inside <body>…</body> -->
<div class="graph">
<div style="height: 22px;" class="bar"></div><!--
--><div style="height: 11px;" class="bar"></div><!--
--><div style="height: 6px;" class="bar"></div><!--
--><div style="height: 49px;" class="bar"></div><!--
--><div style="height: 28px;" class="bar"></div>
</div>
{"view":"separate","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