0

How to style bootstrap indicator to be small hexagon?

I styled it to be rectangle, but I can't set it to a hexagon.

JS Fiddle

i tried this: http://jsfiddle.net/bn6aA/53/

CSS:

.carousel-indicators li {
  background-color: #4f3212;
  width:20px;
    border-radius: 0px;
}


.carousel-indicators .active {
  background-color: #999;
    width:20px;
    border-radius: 0px;
}
RS92
  • 457
  • 3
  • 9
  • 21
  • 1
    Please include your HTML in the post as well. External links to code are susceptible to link-rot. Ideally, you'd create a Stack Snippet, which pretty much precludes the need for a JSFiddle entirely. – TylerH Jul 07 '15 at 15:08
  • Also show us what attempts **you** have made to solve this. – Paulie_D Jul 07 '15 at 15:09
  • 1
    Probably duplicate - http://stackoverflow.com/questions/17896791/hexagon-shape-with-css3 – Paulie_D Jul 07 '15 at 15:10
  • I tried to write this code, but not working http://jsfiddle.net/bn6aA/53/ .carousel-indicators{ position: relative; width: 20px; height: 11.55px; background-color: #64C7CC; margin: 5.77px 0; } .carousel-indicators:before, .carousel-indicators:after li{ content: ""; position: absolute; width: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; } .carousel-indicators:before li { bottom: 100%; border-bottom: 5.77px solid #64C7CC; } .carousel-indicators:after li{ top: 100%; width: 0; border-top: 5.77px solid #64C7CC; } – RS92 Jul 07 '15 at 17:12

1 Answers1

1

For hexagon indicators you can set your CSS to use something like this:

EDIT to Make the Icons Smaller

.carousel-indicators {
    left: 0;
}

.carousel-indicators li {
    width: 24px;
    height: 15px;
    background: red;
    position: relative;
    line-height: 0;
    margin: 0 20px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.carousel-indicators li:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 10px solid red;
}
.carousel-indicators li:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid red;
}
/*Active*/
.carousel-indicators li.active {
    background: gray;
}
.carousel-indicators li.active:before {
    border-bottom-color: gray;
}
.carousel-indicators li.active:after {
    border-top-color: gray;
}

You will have to do a lot of adjusting based on how big you want the hexagons to be and where you want them to exist on your slider but this should get you going. For the hexagons I used this pages example here which has a ton of other good resources. You can also see your updated Fiddle here. Hope that helps.

EDIT: In order to make the icons smaller you will need to play with the width and height of the .carousel-indicators li as well as the border-left, border-right border-top, border-bottom property numbers of the .carousel-indicatorsli:before and .carousel-indicators li:after You will also need to adjust their top and bottom positions. Here is the updated Fiddle.

crazymatt
  • 3,266
  • 1
  • 25
  • 41
  • ok, i know that, but i can't to resize, i want 30px 30px, when i change width my hexaong goes wrong – RS92 Jul 07 '15 at 18:06
  • Thank you , do you know how to set border white 1px solid? Thank you again – RS92 Jul 07 '15 at 19:08
  • If you want a border around the entire hexagon that will not be possible with this CSS hexagon since it uses the border properties to create the top and bottom triangles. You would probably be better off using image icons or font awesome icons (if one exists) – crazymatt Jul 07 '15 at 19:19
  • Is it possible to replace standard indicator circle inbootstrap with some icon? – RS92 Jul 07 '15 at 20:03