Как сверстать прогресс без лишних элементов?

Question

[Stepan S.]

Разметка

<ul class="steps">
    <li class="steps-item curently">
        <span class="marker">
            <span class="marker-icon marker-icon-one"></span>
            <span class="marker-text">Пункт 1</span>
        </span>
    </li>
    <li class="steps-item future...
</ul>

Картинка


CSS, LESS, SASS = ???

Answer 1

[Евгений Петров]

С рядом допущений примерно так jsfiddle.net/petroveg/heks3aws

1. Фон у пунктов белый — он перекрывает пунктирную линию. Эту линию можно задать и с помощью :before у списка вместо SVG.

2. Для IE9 не писал «CSS-полифилл» в виде inline-block, растягивания и управления размером шрифта. Просто лень.
Update: вот и оно jsfiddle.net/petroveg/heks3aws/1

3. Для IE потребуется перевести фон из utf8 в base64. Тоже не стал.

Теперь насчёт сдвига областей и размеров:
— фон у списка сдвинут от верхней границы на 30 пикселей, что составляет половину высоты иконок
— ровно на такое же расстояние сдвинут :before у элемента списка для формирования стрелки
— у первого и последнего элементов в ссылке :after скорректирован по горизонтали на половину отступа у ссылки

Comments

[Nikolay Talanov]

Свг элемент, запиханный целиком в background. выглядит жутковато :) Не проще ли сделать пунктирную линию с помощью :before элемента для ul, задав ему linear-gradient?

[Евгений Петров]

Nikolay Talanov: SVG — это просто картинка. Векторная картинка. И в background кладут именно картинки. Ничего ужасного в том, что в background кладут картинки, нет и быть не может.

И градиент — это тоже картинка. И, опять же, ничего ужасного в том, что в background кладут картинки, нет. И ещё вопрос, что будет быстрее обсчитано — SVG или linear-gradient. Вы проводили такого рода тесты, замеряя производительность?