Timeline indicators using CSS and HTML - html

Question

I am trying to recreate this image using a combination of CSS and HTML with no luck. Please advise.
Current Code:
.lens-profile-timeline {
list-style: none;
padding: 0;
margin: 60px 0 80px;
border-bottom: 8px solid #39752c;
position: relative;
}
.lens-profile-timeline li {
position: absolute;
width: 16px;
height: 16px;
border: 13px solid #39752c;
border-radius: 16px;
background: #fff;
margin-top: -10px;
margin-left: 20px;
margin-right: 20px;
}
.lens-profile-timeline time,
.lens-profile-timeline p {
left: -27px;
top: -40px;
position: absolute;
width: 70px;
text-align: center;
}
.lens-profile-timeline time {
margin-top: 70px;
font-size: 18px;
}
.lens-profile-timeline p {
margin-top: -0px;
font-size: 10px;
line-height: 1.1;
}
.lens-profile-timeline p:after {
content: "";
height: 8px;
border-left: 1px solid #39752c;
position: absolute;
bottom: -10px;
left: 35px;
}
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<ol class="lens-profile-timeline point">
<li style="left: 0;">
<time>1970</time>
</li>
<li style="left: 45%;">
<time datetime="2003-01-01">2003</time>
</li>
<li style="right: 0;">
<time>2013</time>
<p class="hidden">Current Year</p>
</li>
</ol>
</div>
<div class="col-md-3">
</div>
</div>
Above represents the current code being used to generate the image. However you will notice there are several elements which are missing.

Answer 1

You can do it with a combination of pseudo elements, CSS triangles and linear-gradients.
The linear-gradient(to right, #AFCB6D, #126A38); will create a mixed background color effect.
The triangles at the end can be created using CSS triangles concept using pseudo-elements.
The indicators are created with pseudo element circles as well. The indicator text can be specified within content: " " or remove the pseudo-elements and specify the text within div for better customization.
Regular text without using CSS content:
.timeline {
width: 500px;
height: 10px;
margin: 20px;
background: linear-gradient(to right, #AFCB6D, #126A38);
position: relative;
font-family: Roboto;
}
.timeline::before,
.timeline::after {
content: " ";
position: absolute;
height: 0px;
width: 0px;
top: -5px;
}
.timeline::before {
left: -20px;
border: 10px solid #AFCB6D;
border-color: transparent #AFCB6D transparent transparent;
}
.timeline::after {
right: -20px;
border: 10px solid #126A38;
border-color: transparent transparent transparent #126A38;
}
.indicators {
position: relative;
}
.indicator-1,
.indicator-2,
.indicator-3 {
border: 5px solid #AFCB6D;
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
top: -5px;
position: absolute;
}
.indicator-1 {
left: 10px;
}
.indicator-2 {
border-color: #5B9951;
left: 240px;
}
.indicator-3 {
border-color: #126A38;
left: 475px;
}
.indicator-text {
position: relative;
top: 15px;
}
.indicator-1 .indicator-text {
left: -20px;
}
.indicator-2 .indicator-text {
left: -15px;
}
.indicator-3 .indicator-text {
left: -10px;
}
<div class="timeline">
<div class="indicators">
<div class="indicator-1">
<div class="indicator-text">Standard</div>
</div>
<div class="indicator-2">
<div class="indicator-text">Better</div>
</div>
<div class="indicator-3">
<div class="indicator-text">Best</div>
</div>
</div>
</div>
Titles using content property:
.timeline {
width: 500px;
height: 10px;
margin: 20px;
background: linear-gradient(to right, #AFCB6D, #126A38);
position: relative;
font-family: Roboto;
}
.timeline::before,
.timeline::after {
content: " ";
position: absolute;
height: 0px;
width: 0px;
top: -5px;
}
.timeline::before {
left: -20px;
border: 10px solid #AFCB6D;
border-color: transparent #AFCB6D transparent transparent;
}
.timeline::after {
right: -20px;
border: 10px solid #126A38;
border-color: transparent transparent transparent #126A38;
}
.indicator {
border: 5px solid #5B9951;
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
margin: 0 auto;
top: -5px;
position: relative;
}
.indicator::after {
content: "\a Best";
white-space: pre;
border: 5px solid #126A38;
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
top: -5px;
left: 230px;
position: absolute;
}
.indicator::before {
content: "\a Standard";
white-space: pre;
border: 5px solid #AFCB6D;
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
top: -5px;
left: -240px;
position: absolute;
}
.spacer {
margin-top: 20px;
}
<div class="timeline">
<div class="indicator">
<div class="spacer"></div>Better
</div>
</div>

Answer 2

It's not perfect, but using CSS 3 gradients, and changing a few numbers, you can get something pretty close to your picture (minus the arrows)
I wrapped it all up in a JSBin.
Hope this helps,
Sean