How to make a circle breadcrumb with only css


Tags: html5,css3

Problem :

enter image description here

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 solved well. Anyone know of any existing solutions? Thanks



Solution :

Quite simple using CSS3's border-radius property:

enter image description here

LIVE DEMO

LIVE DEMO with a bit of CSS3 anim + jQuery

HTML

  <span class="btnz">
    <span class="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:0 3px;
}
.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


    CSS Howto..

    Remove oval border-radius when 2 digit numbers show up

    Slideshow with specific Text on each Image

    How can I show entered password using tooltip on input type=password in bootstrap?

    Telling LESS CSS how to behave with .active li

    How to fade multiple background colors after few seconds? [duplicate]

    CSS: how to vertically and horizontally align an image?

    How can I hide a button when scrolled to the top of a page?

    JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

    Show different button on page load via Jquery

    How to change table width using css

    Increasing font size for links on hover changes background color size, how to stop this?

    How does max-width property make images responsive?

    How to make a button go down when scrolling? (CSS)

    how to make unorder list all in same block and have gap within each link (CSS)

    How to give all divs same amount of space on each side

    How JQuery can parse colors in text?

    How to create a 3 column layout in css?

    Divs are overlapping, how to fix? CSS

    How to exclude the container from this javascript code?

    CSS : how to center a input inside a div

    how to manage Css Floats

    jquery image preview on hover - how to set fixed position?

    How to make the posts of a content type horizontal scrollabel?

    How to make a vertical border in html/css using a gradient effect that stretches 100% height

    How to set a:link height/width with css?

    How to set the last inner div to fill the rest of the wrapper height with CSS?

    Example of how to load static CSS files from node_modules using webpack?

    How do I make the cursor stay as a pointer on text using jquery/javascript?

    How to set outline without using CSS outline property?

    How would use span to create different styles between selected characters and the rest?