JRE 8 profiles graph

dabblet.css

/* JRE 8 profiles graph */
.jvm-profile p {
    height: 0;
    color: white;
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    text-align: center;
    margin: 1em auto;
}
.jvm-profile .compact1 {
    width: 0;
    border-bottom: 5em solid #0F0;
}
.jvm-profile .compact2 {
    width: 7em;
    border-bottom: 5em solid yellow;
}
.jvm-profile .compact3 {
    width: 14em;
    border-bottom: 5em solid orange;
}
.jvm-profile .full {
    width: 21em;
    border-bottom: 5em solid red;
}
.jvm-profile span {
    display: block;
    text-align: center;
    font-weight: bold;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    position: relative;
    top: 1.5em;
    width: 20ch;
    margin: 0 auto;
    text-shadow: 0 0 .1em rgba(0,0,0,.4);
}
.jvm-profile .compact1 span {
    margin-left: -10ch;
    top: 2em;
}
.jvm-profile .compact2 span {
    margin-left: calc(3.5em - 10ch);
}

dabblet.html

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">
<div class="jvm-profile">
    <p class="compact1"><span class="jvm-profile-size">10 MB</span><span class="jvm-profile-name">compact1</span></p>
    <p class="compact2"><span class="jvm-profile-size">17 MB</span><span class="jvm-profile-name">compact2</span></p>
    <p class="compact3"><span class="jvm-profile-size">24 MB</span><span class="jvm-profile-name">compact3</span></p>
    <p class="full"><span class="jvm-profile-size">140 MB</span><span class="jvm-profile-name">full jre</span></p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}