How To Make A Circle Breadcrumb With Only Css

Has anyone seen a available css3 solution to implement the above? I'd like to find a way without requiring images and also not rewrite something that others have likely already so

Solution 1:

Quite simple using CSS3's border-radius property:

LIVE DEMO

LIVE DEMO with a bit of CSS3 anim + jQuery

HTML

<spanclass="btnz"><spanclass="active"></span><span></span><span></span><span></span></span>

CSS:

.btnz>span{
  display:inline-block;
  width:10px;
  height:10px;
  background:#C0CCD7;
  border-radius:7px;
  border:1px solid #C0CCD7;
  border-top:1px solid #9DA7AF;
  margin:03px;
}
.btnz>span.active{
  background: #63C000;
  border: 1px solid #5FAF0E;
  border-bottom: 1px solid #39660F;
}

More info here:https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Solution 2:

Sorry I have no ready-made implementation to suggest. But it shouldn't be too hard to achieve on modern browsers.

Create just a <div> (or any element, maybe a link <a>) per dot.

To make it round: use border-radius. By making the rounded corners radius half the height/width of the div you will get a circle.

The top (on inactive) or bottom (on active) 3d lighting effect can very simply be emulated with a box-shadow: inset ....

From what I see in your image, pick the correct colors and that's it, pretty much.

Solution 3:

Canvas.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

Canvas canvas canvas canvas canvas.

EDIT: OK, after all the downvotes, here is an alternative answer....SVG. :D

EDIT EDIT: How about inline list elements with no text?

EDIT EDIT EDIT: Seriously, border-radius is a pretty good way to go.