CODEWITHSUNDEEP
htmlcssnavigation
Mike Earley
Mike Earley

Reputation: 1293

Fully flexible html/css 'transparent' navigation arrows (see example)

Sample of What I'm trying to do...

So, my boss really likes the style of wizard navigation I've built in this demo page (above). However, when I built it, the method is somewhat static. What I mean by that is, it doesn't extend well to 5 or 6 or 10 wizard steps. However, I need to have it extend to those steps naturally.

Can I get some recommendations on how to modify the css code so that it works more flexibly? I spent a couple of hours playing around with it, with unsatisfying results.

Upvotes: 0

Views: 607

Answers (1)

bookcasey
bookcasey

Reputation: 40443

It's possible using borders and pseudo-elements:

.selected:before, .selected:after {
  position: absolute;
  top: 0;
  content: "";
  border-top: 20px solid rgba(0, 0, 0, 0.5);
  border-bottom: 20px solid rgba(0, 0, 0, 0.5);
  border-left: none;
  border-right: 20px solid transparent;
}
.selected:before {
  left: 0;
}
.selected:after {
  right: 0;
  border-right: none;
  border-left: 20px solid transparent;
}

Demo (Tested in Chrome and Firefox)

You'll notice I've used SASS in the example. This way, if you have three, or 12 you only have to change one variable in one place($wizard-steps) , and it will calculate all the other values for you to keep it full width (and fluid!). This could also be accomplished with Javascript if it needs to be dynamic.

Upvotes: 2

Related Questions