Как лучше нарисовать шкалу на css?

Question

[Владислав Чернушевич]

Есть вот такая шкала

Индикатор шкалы изменяется в зависимости от результатов. Каким образом лучше реализовать этот момент средствами css?

Answer 1

[Андрей Морозов]

Например так

HTML:

<div class="progress">
  <div class="grayback"></div>
  <div class="strips"></div>
</div>

CSS3:

.progress {
  position: relative;
  width: 600px;
  height: 20px;
  overflow: hidden;
  background: #ff3232;
  background: linear-gradient(to right, #ff3232 0%,#ff9600 33%,#ffff00 66%,#00ff00 100%);
}

.strips {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
  background-size: 6px 100%; /* Ширина деления = 6px / 2 = 3px */
}

.grayback {
  position: relative;
  left: 79%; /* Текущее состояние */
  width: 100%;
  height: 100%;
  background-color: #ddd;
}

Comments

[Иван]

а почему у .grayback position relative, а не absolute?

[Андрей Морозов]

@0neS разница лишь в том относительно чего он будет позиционироваться, мне было удобней относительно нач. положения, вот и все.

Answer 2

[msgtech]

Быть может это кому-нибудь пригодится универсальный способ, работающий во всех браузерах:
dabblet.com/gist/0ae48148155818100211

Answer 3

[Maksim Zverev]

Один из возможных способов:
2 картинки, первая цветная шкала, вторая ЧБ.
2 блока один над другим, в нижнем фон цветная в верхнем фон ЧБ, двигать фон верхнего блока.
Как двигать, тут зависит от условий и конкретной реализации, это можно либо JS инлайн стилями, либо создать кучу классов с позиционированием по шагам и переназначать класс.

Или не блоки а псевдо классы after before, но они не подойдут если у ЧБ картинки есть градация оттенков от начала к концу, там потребуется доп. обертка.

Answer 4

[Алексей Лебедев]

Единственный кросбраузерный вариант это таблицы. Да и просто их изменять..