CSS3 Шестиугольник с тенями и рамками и border-radius / CSS3 Hexagon with borders and box-shadow and border-radius

upload successful

Недавно мне понадобилось добавить в вёрстку шестиугольник с двойной рамкой и тенью, 2 часа поиска в интернете не принесли своих результатов, и я решил сделать всё сам.

Recently I needed to add to the layout of a hexagon with a double border, border-radius and shadow, 2h Internet search did not bring their results, and I decided to do it all himself.

Совместимость/Сompatible: ie8+; saf4+; op12+

Каждый цветовой виток будет представлять из себя ещё один шестиугольник, вписанный в другой, таким образом, чтобы нам реализовать шестиугольник с двойной рамкой и тенью, нам потребуется 4 шестиугольника.

Each color revolution will be of a another hexagon inscribed in the other, so that we realize the hexagon with a double border and shadow, we need the 4 hexagon.

  1. Шестиугольник рисует тень
  2. Шестиугольник рисует первую рамку
  3. Шестиугольник рисует вторую рамку
  4. Шестиугольник рисует фон внутреннего контента

  5. Hexagon draws shadow

  6. Hexagon draws the first frame
  7. Hexagon draws the second frame
  8. Hexagon background draws internal content

Возникает резонное сомнение вида: если я захочу что-то изменить, то мне придётся 4 раза перерисовывать каждый из шестиугольников?
Ответ родился в муках: этого делать не нужно, будем использовать свойство CSS transform:scale(x,y)

Таким образом нам достаточно одного правильно нарисованного шестиугольника для того, чтобы получить из него миллионы разноразмерных братьев.

Ниже привожу пример для одного шестиугольника:

There is a reasonable doubt of the form: if I want to change something, then I will have 4 times redraw each of the hexagons?
The answer was born in pain: do not need to, we will use the property of CSS transform: scale (x, y)

Thus it is sufficient to properly drawn one hexagon to receive it millions of different size brothers.

Here is an example of a hexagon:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="hexa">
<div class="hexa_text"><h2>60</h2>часов лекций</div>
<div class="hexa_image"></div>
<div class="hexagon scale_0">
<div class="h_sq t_sq_1 color_0"></div>
<div class="h_sq t_sq_2 color_0"></div>
<div class="h_sq t_sq_3 color_0"></div>
<div class="h_sq t_sq_4 color_0"></div>
<div class="h_sq t_sq_5 color_0"></div>
<div class="h_sq t_sq_6 color_0"></div>
</div>
<div class="hexagon scale_1">
<div class="h_sq t_sq_1 color_1"></div>
<div class="h_sq t_sq_2 color_1"></div>
<div class="h_sq t_sq_3 color_1"></div>
<div class="h_sq t_sq_4 color_1"></div>
<div class="h_sq t_sq_5 color_1"></div>
<div class="h_sq t_sq_6 color_1"></div>
</div>
<div class="hexagon scale_2">
<div class="h_sq t_sq_1 color_2"></div>
<div class="h_sq t_sq_2 color_2"></div>
<div class="h_sq t_sq_3 color_2"></div>
<div class="h_sq t_sq_4 color_2"></div>
<div class="h_sq t_sq_5 color_2"></div>
<div class="h_sq t_sq_6 color_2"></div>
</div>
<div class="hexagon scale_3">
<div class="h_sq t_sq_1 color_3"></div>
<div class="h_sq t_sq_2 color_3"></div>
<div class="h_sq t_sq_3 color_3"></div>
<div class="h_sq t_sq_4 color_3"></div>
<div class="h_sq t_sq_5 color_3"></div>
<div class="h_sq t_sq_6 color_3"></div>
</div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.hexa {position:relative;float:left;margin-left:142px;margin-top:40px;-webkit-transition: 1s;webkit-transform-origin:50% 50%;
-webkit-animation-timing-function: linear;}
.hexagon {position:absolute;}
.scale_0 {z-index:10;-o-transform: scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-sand-transform: rotate(0.6,0.6);-webkit-transform: scale(0.6,0.6);transform: scale(0.6,0.6);left:0px;top:0px;}
.scale_1 {z-index:20;-o-transform: scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-sand-transform: rotate(0.6,0.6);-webkit-transform: scale(0.6,0.6);transform: scale(0.6,0.6);left:0px;top:0px;}
.scale_2 {z-index:30;-o-transform: scale(0.58,0.58);-ms-transform: scale(0.58,0.58);-sand-transform: rotate(0.58,0.58);-webkit-transform: scale(0.58,0.58);transform: scale(0.58,0.58);left:2px;top:1px;}
.scale_3 {z-index:40;-o-transform: scale(0.55,0.55);-ms-transform: scale(0.55,0.55);-sand-transform: rotate(0.55,0.55);-webkit-transform: scale(0.55,0.55);transform: scale(0.55,0.55);left:4px;top:2px;}
.hexa h2 {margin:0px;vertical-align:middle;color:#524652;font-size:240%;margin-top:-16px;font-weight:normal;}
.hexa {color:#524652;font-size:90%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.hexa_text {cursor:pointer;vertical-align:middle;position:absolute;z-index:50;color:#000;left:0px;top:0px;text-align:center;width:102px;height:60px;-webkit-transition: 1s;}
.hexa_image {position:absolute;z-index:60;width:114px;left:-5px;height:130px;top:-45px;
background-position: 3px 5px;
background-repeat: no-repeat;
}
.color_3 {background-color:#fff;}
.color_2 {background-color:#fc4858;}
.color_1 {background-color:#b91111;}
.color_0 {background-color:#fff;box-shadow:0px 0px 3px #888;}
.color_1_blue {background-color:#3769af;}
.color_2_blue {background-color:#00ace5;}
.color_1_green {background-color:#799319;}
.color_2_green {background-color:#8fbf2f;}
.color_1_yellow {background-color:#e68020;}
.color_2_yellow {background-color:#ffb307;}
.h_sq {position:absolute;border-radius:10px;width:114px;height:114px;}
.t_sq_1 {left:10px;top:10px;z-index:11;-o-transform: rotate(120deg);-sand-transform: rotate(120deg);-ms-transform:rotate(120deg);-webkit-transform:rotate(120deg);transform:rotate(120deg);}
.t_sq_2 {left:48px;top:10px;z-index:11;-o-transform: rotate(60deg);-sand-transform: rotate(60deg);-ms-transform:rotate(60deg);-webkit-transform:rotate(60deg);transform:rotate(60deg);}
.t_sq_3 {left:67px;top:-23px;z-index:12;}
.t_sq_4 {left:10px;top:-57px;z-index:13;-o-transform: rotate(-120deg);-sand-transform: rotate(-120deg);-ms-transform:rotate(-120deg);-webkit-transform:rotate(-120deg);transform:rotate(-120deg);}
.t_sq_5 {left:-9px;top:-23px;z-index:10;}
.t_sq_6 {left:48px;top:-57px;z-index:12;-o-transform: rotate(-60deg);-sand-transform: rotate(-60deg);-ms-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);transform:rotate(-60deg);}

В коде/Code description:

1
2
3
4
5
6
7
8
9
- .hexa основная обёртка одного шестиугольника с относительным позиционированием
- .scale_X отвечает за масштабирование X-го шестиугольника и его смещение в абсолютном значении
- .hexa_text отвечает за позиционирование текста внутри шестиугольника
- .hexa_image отвечает за позиционирование картинки внутри шестиугольника (обрезать нужно самостоятельно)
- .color_0 отвечает за тень всего шестиугольника
- .color_1 отвечает за цвет первой рамки
- .color_2 отвечает за цвет второй рамки
- .color_3 отвечает за цвет внутреннего фона шестиугольника
- .h_sq характеристика квадрата для составления шестиугольника, там-же можно поменять border-radius шестиугольника

Меняя класс .color_ можно раскрасить каждую сторону шестиугольника в свой цвет.

1
2
3
4
5
6
7
8
9
- .hexa main wrapper with relative position
- .scale_X scale for X-numbered hexagon and x-y offset
- .hexa_text text position in hexagon
- .hexa_image image position in hexagon (you should slice it to hexagon byself)
- .color_0 hexagon shadow class
- .color_1 first border color class
- .color_2 second border color class
- .color_3 hexagon innet background color class
- .h_sq hexagon paren sqare if tou want to change hexagon border-radius use whis class

Chnging .color_n class in HTML you cen re-colorate each border side hexagon to different color

Демо/Demo: http://cssdesk.com/gmLCx