-5

I'm currently developing a website and the design team made some kind of progress bar in a purchase process like this.

http://www.4shared.com/photo/4PPLguwXba/untitled.html

I'm using bootstrap and the components it offers won't help me doing that. Is there anyway I can do something like this? I just found hexagon shapes FILLED in colors, which is not what I want.

Thanks in advance!

Lucas de Paula
  • 3
  • 1
  • 1
    Have you tried anything? – Turnip Feb 11 '15 at 12:48
  • yes, i took a look in many websites, here are some of them. http://jtauber.github.io/articles/css-hexagon.html http://csshexagon.com/ – Lucas de Paula Feb 11 '15 at 12:52
  • Welcome to SO. Your question is too broad for SO. It lacks a proper attempt with code. All the same, maybe [this](http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only) and [this](http://stackoverflow.com/questions/25445118/elongated-hexagon-shaped-button-using-only-one-element/25448974#25448974) can help. – web-tiki Feb 11 '15 at 12:55
  • Thanks for the answer, it helped a lot! Next time I will try to better specify my question and try many other solutions! – Lucas de Paula Feb 11 '15 at 13:02

1 Answers1

2

This approach allows a quick insight as to how you possibly could approach this task, although it is far from complete.

$('.start').click(function() {
  $('.start, .added').removeClass("startActive").removeClass("addedActive");
  $(this).toggleClass("startActive");
});
$('.added').click(function() {
  $('.start, .added').removeClass("startActive").removeClass("addedActive");
  $(this).toggleClass("addedActive");
});
div {
  display: inline-block;
  height: 100px;
  width: 200px;
  border-top: 5px solid gray;
  border-bottom: 5px solid gray;
  position: relative;
  text-align: center;
  margin-left: -4px;
}
.start {
  margin-left: 45px;
}
.start:before,
.startActive:before {
  content: "";
  position: absolute;
  height: 70px;
  width: 70px;
  top: 12px;
  left: -38px;
  border-bottom: 5px solid gray;
  border-left: 5px solid gray;
  transform: rotate(45deg);
}
.startActive,
.addedActive {
  border-top: 5px solid red;
  border-bottom: 5px solid red;
}
.startActive:before {
  border-bottom: 5px solid red;
  border-left: 5px solid red;
}
.added:before,
addedActive:before {
  content: "";
  position: absolute;
  height: 70px;
  width: 70px;
  top: 12px;
  left: -38px;
  border-top: 5px solid gray;
  border-right: 5px solid gray;
  transform: rotate(45deg);
}
.start:after,
.added:after,
.addedActive:after,
.startActive:after {
  content: "";
  position: absolute;
  height: 70px;
  width: 70px;
  top: 12px;
  right: -38px;
  border-top: 5px solid gray;
  border-right: 5px solid gray;
  transform: rotate(45deg);
}
.startActive:after {
  border-top: 5px solid red;
  border-right: 5px solid red;
  z-index: 8;
}
.addedActive:before {
  border-top: 5px solid red;
  border-right: 5px solid red;
    z-index: 8;
}
.addedActive:after {
  border-top: 5px solid red;
  border-right: 5px solid red;
    z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="start">start</div>
<div class="added">middle</div>
<div class="added">end</div>

Note: i'm not the best at jquery, although I have added 'active' parts (click on elements to 'activate' it).

jbutler483
  • 24,074
  • 9
  • 92
  • 145