Как мне подсказали, нарисовать соты можно следующим образом http://zencoder.ru/css/hexagon-css
Шестиугольник получается, все хорошо и понятно. Но вот беда, треугольники сверху и внизу строятся при помощи ширины бордюрчика border-top: 30px solid green;
Мне нужно, чтобы шестиугольник был белого фона, но имел цвет бордюрчиков. Пока получается то что есть на картинке
Немного использовал для упрощения less
@bordercolor: #c7e0ea;
@width-border: 30px;
@triangle: 52px;
.hex{
margin: 0 3px 0 0;
}
.hex:before {
content:" ";
width: 0; height: 0;
border-bottom: @width-border solid @bordercolor;
border-left: @triangle solid transparent;
border-right: @triangle solid transparent;
position: absolute;
top: -@width-border;
}
.hex {
margin-top: @width-border;
margin-bottom:@width-border;
width: @triangle*2;
height: @width-border*2;
border: 1px solid @bordercolor;
background: #fff;
position: relative;
float: left;
}
.hex:after {
content: " ";
width: 0;
position: absolute;
bottom: -@width-border;
border-top: @width-border solid @bordercolor;
border-left: @triangle solid transparent;
border-right: @triangle solid transparent;
}
Как же быть?
