Горизонтальная столбиковая диаграмма на CSS, без jQuery

<div class="chart">
<p>Переходы из поисковых систем - 40%</p>
<div class="pipe">
<div style="width: 40%"> </div>
</div>
<p>Переходы по ссылкам на сайтах - 38%</p>
<div class="pipe">
<div style="width: 38%"> </div>
</div>
<p>Прямые заходы - 18%</p>
<div class="pipe">
<div style="width: 18%"> </div>
</div>
<p>Переходы с сохраненных страниц  - 4%</p>
<div class="pipe">
<div style="width: 4%"> </div>
</div>
</div>

.chart .pipe {
 background: #eee none repeat scroll 0 0;
 box-shadow: 3px 3px 3px 0 rgb(200, 200, 200) inset;
}
.chart .pipe {
 width: 100%;
 height: 10px;
 border-radius: 5px;
 margin-bottom: 1.2em;
}
.chart p {
 margin: 0 0 5px
}
.chart .pipe > div {
 background: #dc3545 none repeat scroll 0 0;
 border-radius: 5px;
 height: 10px;
}