верстка 6-угольников

Подскажите, кто знает как это сверстать? В интернете мало инфы по этому поводу. Спасибо)

Ответ

Для гексагонов есть генератор — http://csshexagon.com/
К коду, который он генерирует, надо добавлять
*, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; }
Иначе псевдоэлементы будут уезжать.
Пример на основе кода из генератора:
*, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } .hexagon { position: relative; width: 300px; height: 173.21px; background-color: #e947bc; margin: 86.60px 0; border-left: solid 10px #640222; border-right: solid 10px #640222; transition: background-color 500ms; } .hexagon:before, .hexagon:after { content: ""; position: absolute; z-index: 1; width: 212.13px; height: 212.13px; -webkit-transform: scaleY(0.5774) rotate(-45deg); -ms-transform: scaleY(0.5774) rotate(-45deg); transform: scaleY(0.5774) rotate(-45deg); background-color: #e947bc; left: 33.9340px; transition: background-color 500ms; } .hexagon:before { top: -106.0660px; border-top: solid 14.1421px #640222; border-right: solid 14.1421px #640222; } .hexagon:after { bottom: -106.0660px; border-bottom: solid 14.1421px #640222; border-left: solid 14.1421px #640222; } .hexagon:hover, .hexagon:hover:before, .hexagon:hover:after { background-color: #fff; } .icon { position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-left: -10px; margin-top: -10px; background-color: #000; z-index: 10; }

Фиддл https://jsfiddle.net/mz2jmsdx/21/
Иконка внутри гексагона условно показана в виде чёрного квадрата, можно заполнить чем угодно и заложить для неё любые размеры.