Мне нужно реализовать следующую комбинацию кругов и строк в CSS, и я ищу указатели на то, как эффективно реализовать это. Круги и линии должны выглядеть так:
Я могу реализовать круги как таковые:
span.step {
background: #ccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #1f79cd;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
но линии мне сложно понять.
Размер круга изменяется в зависимости от того, активен он или нет, и цвет линии, соединяющей круги, также изменяется в зависимости от состояния. Как бы это сделать?