It is not directly possible to achieve this, as hexagons are created by borders through pseudo elements. An alternative would be to overlay hexagons within hexagons, thus achieving the same desired results.
Here is an example of what can be achieved:
LIVE EXAMPLE HERE
HTML – pretty basic, continue the same pattern for more borders.
<div class="hex">
<div class="hex inner">
<div class="hex inner2"></div>
</div>
</div>
CSS (three layers – two inner elements)
Start with the hexagon class, defining the shape/size/colors:
.hex {
margin-top: 70px;
width: 208px;
height: 120px;
background: #6C6;
position: relative;
}
.hex:before, .hex:after {
content:"";
border-left: 104px solid transparent;
border-right: 104px solid transparent;
position: absolute;
}
.hex:before {
top: -59px;
border-bottom: 60px solid #6C6;
}
.hex:after {
bottom: -59px;
border-top: 60px solid #6C6;
}
Style the inner class and use transform: scale() to proportionally decrease the dimensions of the inner elements. In this example, a scale of scale(.8, .8) is used. If you want thicker borders, decrease the numbers; conversely, if you want thinner borders, increase the numbers.
Specify and overwrite the colors, also increase the z-index value to bring the element forward.
.hex.inner {
background-color:blue;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:1;
}
.hex.inner:before {
border-bottom: 60px solid blue;
}
.hex.inner:after {
border-top: 60px solid blue;
}
Style the second nested element, essentially following the same steps as last time. It’s worth nothing that the same scale value is used, because it is within an already scaled element. Of course, you can use whatever you want; this is just a basic example.
.hex.inner2 {
background-color:red;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:2;
}
.hex.inner2:before {
border-bottom: 60px solid red;
}
.hex.inner2:after {
border-top: 60px solid red;
}
Again, live example here