Diagnostic de performance énergétique

by oilvier

HTML

<div class="diagnostic">
    <ul class="levels">
        <li class="lvl-a">A <span class="score">= 50</span></li>
        <li class="lvl-b">B <span class="score">51 à 90</span></li>
        <li class="lvl-c">C <span class="score">91 à 150</span></li>
        <li class="lvl-d">D <span class="score">151 à 230</span></li>
        <li class="lvl-e">E <span class="score">231 à 330</span></li>
        <li class="lvl-f">F <span class="score">331 à 450</span></li>
        <li class="lvl-g">G <span class="score">> 450</span></li>
    </ul>
    <div class="result">
        <span class="result-d">195</span>
    </div>
</div>

CSS

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {line-height:1.3; font-size:14px; font-family:Arial;}

.diagnostic {margin:25px auto; max-width:500px;}
    .levels {float:left; width:280px; padding:5px 20px 0 0; margin-right:20px; border-right:1px solid #888;}
        [class^="lvl-"] {margin:0 0 5px; padding:5px 20px 5px 5px; line-height:18px; text-align:right; position:relative; color:#FFF; font-weight:bold;}
        [class^="lvl-"]:after {border-style: solid; border-width:14px; border-color:#FFF #FFF #FFF transparent; content: " "; height:0; width:0; position:absolute; right:-14px; top:0; z-index: 1;}
            .score {float:left; font-size:12px; font-weight:normal; padding-left:5px;}
    
    .result {float:left;}
        [class^="result-"] {background:#000; color:#FFF; position:absolute; display:inline-block; line-height:40px; font-size:20px; padding:0 40px;}   
        [class^="result-"]:before, [class^="result-"]:after {border-style: solid; border-width:20px; content: " "; height:0; width:0; position:absolute; top:0; z-index: 1;}
        [class^="result-"]:before {border-color:#FFF transparent #FFF #FFF; left:-20px;}
        [class^="result-"]:after {border-color: transparent #FFF transparent transparent ; right:0;}

.lvl-a {width:40%; background-color:#006401;}
.lvl-b {width:50%; background-color:#128705;}
.lvl-c {width:60%; background-color:#94C708;}
.lvl-d {width:70%; background-color:#FFE10D;}
.lvl-e {width:80%; background-color:#EB7F12;}
.lvl-f {width:90%; background-color:#E1450C;}
.lvl-g {width:100%; background-color:#D5131B;}

.result-a {top:23px;}
.result-b {top:56px;}
.result-c {top:89px;}
.result-d {top:117px;}
.result-e {top:155px;}
.result-f {top:188px;}
.result-g {top:221px;}