Change to hexagon bootstrap indicator - css

Question

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;
}

Answer 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.