Looking at the image provided, my task is to create and animate it. I was considering using CSS3 border-radius instead of an actual image. Below are the HTML and CSS code that I have so far.
The animation I envision involves the arrow gradually appearing from the bottom, moving upwards along a path, taking a right turn with a flowing motion until reaching the end with an arrow pointer. However, I'm unsure about how to achieve this effect. It needs to be supported on browsers IE8+, Chrome, and Firefox.
HTML:
<div class="years">
<article>
<figure>
<div class="vrt-bar"></div>
<div class="hrzt-bar"></div>
<div class="arrow"></div>
</figure>
</article>
</div>
CSS:
.years article figure {
height:auto;
position:relative;
}
.years article figure .vrt-bar {
width:34px;
height:192px;
behavior: url(css/PIE.htc);
border-radius:25px 0 25px 25px;
-webkit-border-radius: 25px 0 25px 25px;
-moz-border-radius: 25px 0 25px 25px;
float:left;
background:#00b9d3;
position:relative;
}
.years article figure .hrzt-bar {
width:143px;
height:32px;
background:#00b9d3;
margin-left:34px;
}
.years article figure .arrow {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #00b9d3;
position:absolute;
top:-10px;
left:177px;
}
jsfiddle: http://jsfiddle.net/KgAe4/
If anyone can provide assistance with this, it would be greatly appreciated.