Мы назначаем рамку и ширину, а также выбираем режим относительного позиционирования (relative) для размещения метки внутри шкалы. Затем определяется внутреннее заполнение с градиентной заливкой:

html5_meter/stylesheets/style.css

.fill{

background-color: #693;

background-image: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.37, rgb(14,242,30)),

color-stop(0.69, rgb(41,255,57))

);

background-image: -moz-linear-gradient(

center bottom,

rgb(14,242,30) 37%,

rgb(41,255,57) 69%

);

}

Синтаксис градиентной заливки более подробно рассматривается в главе 8. После стилевого применения заливки необходимо разместить метку для суммы в долларах внутри прямоугольника.

html5_meter/stylesheets/style.css

.label{

position: absolute;

right: 0;

top: 0;

z-index: 1000;

}