style CONTAINER graphcontainer font size 7px margin 2em auto position relative height 47 9em width 37em overflow hidden left bottom patch graphcontainer before content position absolute z index 12 bottom 0 left 0 width 0 height 0 border style solid border width 0 5em 5em 0 border color transparent transparent fff transparent BACK CASING Back panel graphbackground width 26 2em height 43em position absolute top 0 left 0 background color rgba 160 160 160 2 webkit transform rotate 0deg moz transform rotate 0deg o transform rotate 0deg ms transform rotate 0deg transform rotate 0deg graphbackground before graphbackground after content position absolute Bottom panel graphbackground before bottom 4 9em left 2 5em width 26 2em height 4 9em background color rgba 160 160 160 1 webkit transform skew 45deg moz transform skew 45deg o transform skew 45deg ms transform skew 45deg transform skew 45deg Right back panel graphbackground after top 21 5em left 7 2em width 43em height 4 9em background color rgba 160 160 160 0 webkit transform rotate 90deg skew 45deg moz transform rotate 90deg skew 45deg o transform rotate 90deg skew 45deg ms transform rotate 90deg skew 45deg transform rotate 90deg skew 45deg FRONT CASING Front panel graphforeground z index 3 position absolute width 26 2em height 43em top 4 9em left 4 9em background color rgba 160 160 160 1 webkit transform rotate 0deg moz transform rotate 0deg o transform rotate 0deg ms transform rotate 0deg transform rotate 0deg graphforeground before graphforeground after content position absolute Left panel graphforeground before bottom 21 5em right 7 1em width 43 1em height 5em background color rgba 160 160 160 27 webkit transform rotate 90deg skew 45deg moz transform rotate 90deg skew 45deg o transform rotate 90deg skew 45deg ms transform rotate 90deg skew 45deg transform rotate 90deg skew 45deg overflow hidden Top panel graphforeground after top 4 9em right 2 4em width 26 2em height 4 9em background color rgba 160 160 160 2 webkit transform skew 45deg moz transform skew 45deg o transform skew 45deg ms transform skew 45deg transform skew 45deg BAR GRAPH graphbar webkit transition bottom 1s linear moz transition bottom 1s linear o transition bottom 1s linear ms transition bottom 1s linear transition bottom 1s linear z index 2 position absolute width 31 1em height 43em bottom 21 5em default bar state left 0 margin bottom 43em background color rgba 5 62 123 7 graphbar before graphbar after content position absolute top shadow graphbar before top 4 9em right 2 5em width 26 2em height 4 9em background color rgba 160 160 160 4 webkit transform skew 45deg moz transform skew 45deg o transform skew 45deg ms transform skew 45deg transform skew 45deg top fill graphbar after top 5em width 26 1em border bottom 5em solid rgba 5 62 123 7 border left 0 solid transparent border right 5 1em solid transparent TICKS LABELS label position absolute text indent 18em line height 4em font size 1 5em font weight normal color 434343 label before label after content position absolute border style none none dotted border color rgba 177 177 177 4 border width 0 0 15em background rgba 221 221 221 3 Front tick line label before width 17 5em bottom 0 left 0 Side tick line label after width 6 9em bottom 2 4em left 5 8em webkit transform rotate 45deg moz transform rotate 45deg o transform rotate 45deg ms transform rotate 45deg transform rotate 45deg Position the lines p25 bottom 7em p50 bottom 14 2em p75 bottom 21 3em style div id graphcontainer div id graphbackground div div id graphbar div div id graphforeground div id p25 class label 25 div div id p50 class label 50 div div id p75 class label 75 div div div
overflow hidden Top panel graphforeground after top 4 9em right 2 4em width 26 2em height 4 9em background color rgba 160 160 160 2 webkit transform skew 45deg moz transform skew 45deg o transform skew 45deg ms transform skew 45deg transform skew 45deg BAR GRAPH graphbar webkit transition bottom 1s linear moz transition bottom 1s linear o transition bottom 1s linear ms transition bottom 1s linear transition bottom 1s linear z index 2 position absolute width 31 1em height 43em bottom 21 5em default bar state left 0 margin bottom 43em background color rgba 5 62 123 7 graphbar before graphbar after content position absolute top shadow graphbar before top 4 9em right 2 5em width 26 2em height 4 9em background color rgba 160 160 160 4 webkit transform skew 45deg moz transform skew 45deg o transform skew 45deg ms transform skew 45deg transform skew 45deg top fill graphbar after top 5em width 26 1em border bottom 5em solid rgba 5 62 123 7 border left 0 solid transparent border right 5 1em solid transparent TICKS LABELS label position absolute text indent 18em line height 4em font size 1 5em font weight normal color 434343 label before label after content position absolute border style none none dotted border color rgba 177 177 177 4 border width 0 0 15em background rgba 221 221 221 3 Front tick line label before width 17 5em bottom 0 left 0 Side tick line label after width 6 9em bottom 2 4em left 5 8em webkit transform rotate 45deg moz transform rotate 45deg o transform rotate 45deg ms transform rotate 45deg transform rotate 45deg Position the lines p25 bottom 7em p50 bottom 14 2em p75 bottom 21 3em style div id graphcontainer div id graphbackground div div id graphbar div div id graphforeground div id p25 class label 25 div div id p50 class label 50 div div id p75 class label 75 div div div