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

210

26 марта 2018, 23:16

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

Answer 1

Для гексагонов есть генератор http://csshexagon.com/

К коду, который он генерирует, надо добавлять

*, *:before, *:after {
    -moz-box-sizing: border-box;
     box-sizing: border-box;
}

иначе псевдоэлементы будут уезжать.

Пример на основе кода из генератора

HTML

<div class="hexagon">
  <div class="icon"></div>
</div>

CSS

*, *: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/

Иконка внутри гексагона условно показана в виде черного квадрата, можно заполнить чем угодно и заложить для неё любые размеры.

Answer 2

Полигоны можно создать с помощью SVG, указывая points по оси X & Y от 1 до 6.

Update 1.0: Добавил иконки, но есть один нюанс. Тег <i> не действителен в SVG, поэтому я использовал иконки таким образом:

<text x="0" y="0">&#xf0с1;</text>

Затем добавил font-family:

svg text {
   font-family: FontAwesome;
}

Update 1.1: Добавил анимацию вращения иконок:)

* { 
  margin: 0; 
  padding: 0; 
  user-select: none; 
} 
 
.wrapper { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-wrap: wrap; 
} 
 
svg text { 
  font-family: FontAwesome; 
  font-size: 1.5rem; 
  fill: #ffffff; 
  pointer-events: none; 
  transition: all .4s; 
} 
 
.hex { 
  fill: #FC635E; 
  stroke: #FE8682; 
  stroke-width: 2px; 
  transition: all .4s; 
} 
 
.hex:hover { 
  fill: #fff; 
  stroke: #FC635E; 
} 
 
.hex:hover+g text { 
  fill: #FC635E; 
  transform: rotate(360deg) scale(0.9); 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
<div class="wrapper"> 
  <div class="item"> 
    <svg width="160" height="160"> 
      <polygon class="hex" id="h1" points="25,22 37,29 37,44 25,51 12,44 12,29" transform="scale(3)"/> 
      <g transform="translate(62, 118)"> 
        <text>&#xf0c1;</text>	 
      </g> 
    </svg> 
  </div> 
  <div class="item"> 
    <svg width="160" height="160"> 
      <polygon class="hex" id="h2" points="25,22 37,29 37,44 25,51 12,44 12,29" transform="scale(3)"/> 
      <g transform="translate(62, 118)"> 
        <text>&#xf0c4;</text> 
      </g> 
    </svg> 
  </div> 
  <div class="item"> 
    <svg width="160" height="160"> 
      <polygon class="hex" id="h3" points="25,22 37,29 37,44 25,51 12,44 12,29" transform="scale(3)"/> 
      <g transform="translate(62, 118)"> 
        <text>&#xf0c5;</text>	 
      </g> 
    </svg> 
  </div> 
</div>

Answer 3

SVG конечно хорошо но если можно избежать других технологий то я стараюсь не применять ни чего кроме html и css.... надеюсь мой ответ помог понять

* { 
  margin: 0; 
  padding: 0; 
} 
 
.item { 
  width: 150px; 
  height: 60px; 
  background: red; 
  margin: 100px auto; 
  position: relative; 
} 
 
.item:after { 
  content: ""; 
  display: block; 
  width: 150px; 
  height: 60px; 
  background: red; 
  position: ; 
  transform: rotate(45deg); 
} 
 
.item:before { 
  content: ""; 
  display: block; 
  width: 150px; 
  height: 60px; 
  background: red; 
  position: ; 
  transform: rotate(-45deg); 
  position: absolute; 
} 
 
.outer { 
  width: 65px; 
  height: 147px; 
  background: red; 
  position: absolute; 
  left: 28%; 
  top: -71%; 
  margin-left: -0%; 
  border-radius: 4px; 
  z-index: 100; 
  line-height: 140px; 
  text-align: center; 
}

<div class="item"> 
  <div class="outer"> 
    иконка 
  </div> 
</div>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Размещение карт-google со своей информацией

Можно ли добавить гугл карты к себе на сайт и прикрепить к ним блок со своей информацией?

210

CSS

Стилизация progress линии у input range

Здравствуйте! Столкнулся с проблемой стилизации полосы прогресса у input range

594

CSS

CSS. прописывание элемента внутри класса

Видел в одном видеоуроке, как парень прописывает код класса внутри другого класса

193

CSS

Обратится к элементу по id в блоке кода CSS

Подскажите пожалуйста, могу ли я обратится к элементу по id в блоке кода ? Вот пример того что я хочу: https://prntsc/iwfm2s

197