<div class="main">
<div class="bubble active"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
</div>
.main {
min-width:320px;
}
.bubble
{
border-radius:50%;
height:40px;
width:40px;
background: #aaa;
display:inline-block;
margin:0 -3px;
}
.bubble.active
{
background:red;
}
.connector
{
display:inline-block;
height:3px;
width:10%;
background: #aaa;
vertical-align:middle;
margin-top:-30px;
}
Also see: Tab Triggers