22

введите сюда описание изображения

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

2
  • 3
    Самый адекватный вариант - svg. 25 мар 2018 в 12:29
  • 1
    Если вам помог чей-то ответ, не забудьте отметить его решением(зелёная галочка слева:) )
    – Arthur
    25 мар 2018 в 17:11

4 ответа 4

21

Полигоны можно создать с помощью 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>

Update 1.2: Добавил решение на HTML+CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

i {
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.hexagon,
.hexagon::before,
.hexagon::after,
.fill,
.fill::before,
.fill::after,
i {
  transition: 0.3s;
}

.hexagon,
.hexagon::before,
.hexagon::after {
  background-color: #FE8682;
}

.fill,
.fill::before,
.fill::after {
  background-color: #FC635E;
}

.hexagon::before,
.hexagon::after {
  transform: translateX(-50%) scaleY(0.7) rotate(45deg);
}

.hexagon {
  position: relative;
  margin: 3rem;
  width: 7.7rem;
  height: 4rem;
  font-size: 2rem;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  width: 5.4rem;
  height: 5.4rem;
}

.hexagon::before {
  top: -2.7rem;
  left: 50%;
}

.hexagon::after {
  bottom: -2.7rem;
  left: 50%;
}

.hexagon:hover {
  background-color: #FC635E
}

.hexagon:hover i {
  color: #FC635E;
}

.hexagon:hover::after {
  background-color: #FC635E
}

.hexagon:hover::before {
  background-color: #FC635E
}

.hexagon:hover .fill {
  background-color: white;
}

.hexagon:hover .fill::after {
  background-color: white;
}

.hexagon:hover .fill::before {
  background-color: white;
}

.fill {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7rem;
  height: 3.5rem;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.fill::before,
.fill::after {
  content: "";
  position: absolute;
  width: 5rem;
  height: 5rem;
  transform: scaleY(0.7) rotate(45deg);
}

.fill::before {
  top: -2.5rem;
  left: 1rem;
}

.fill::after {
  bottom: -2.5rem;
  left: 1rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="hexagon">
  <div class="fill"></div>
  <i class="fa fa-desktop"></i>
</div>
<div class="hexagon">
  <div class="fill"></div>
  <i class="fa fa-stack-overflow"></i>
</div>
<div class="hexagon">
  <div class="fill"></div>
  <i class="fa fa-codepen"></i>
</div>

4
  • а как вы рисуете точки points в определении svg ? есть какой-то редактор, который это визуализирует? я просто вообще не в теме.
    – Heidel
    26 мар 2018 в 13:41
  • @Heidel, в этом случае вручную, изредка использую редакторы. Там всё предельно просто, если присмотреться, то можно увидеть пробел между каждыми двумя числами. Это означает — X, Y X, Y X, Y и т.д.
    – Arthur
    26 мар 2018 в 13:50
  • это понятно, что это двухмерные координаты x и y. просто это ж надо еще геометрически прикинуть и их определить ))
    – Heidel
    26 мар 2018 в 13:58
  • @Heidel, иногда конечно можно подсмотреть, какие координаты проставить, здесь явно не слишком ровный полигон, человеческому глазу не осилить:)))
    – Arthur
    26 мар 2018 в 14:00
9

Для гексагонов есть генератор — 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;
}
<div class="hexagon">
  <div class="icon"></div>
</div>

Фиддл https://jsfiddle.net/mz2jmsdx/21/

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

1
  • 4
    Весьма полезная вещь, но лучше уметь самому:)) (+)
    – Arthur
    26 мар 2018 в 13:07
6

Генератор кривоугольников.

Скрипт генерирует не только шестиугольники но и многогранники с любым количеством вершин. Вариант с равными гранями есть много где, поэтому в этом примере равные грани мы немного подправим, что бы фигуры стали более индивидуальными.

В данном примере мы делаем 4,5,6 и 7 угольники.

var svgNS = "http://www.w3.org/2000/svg";

var points;
for (var i = 0; i <= 3; i++) {
  points = MakeIdealMnogogrannik(30, 4 + i);
  for (var j = 1; j <= 3; j++) {
    document.getElementById(`svg${i}${j}g`).appendChild(MakeRandomMnogogrannik(7));
  }
}

function MakeIdealMnogogrannik(rad, n) {
  var angle = 2 * Math.PI / n;

  var points = [];

  for (var i = 0; i < n; i++) {
    points.push({
      x: rad * Math.sin(angle * i),
      y: -rad * Math.cos(angle * i)
    });
  }

  return points;
}

function MakeRandomMnogogrannik(distance) {

  var path = document.createElementNS(svgNS, "path");
  var points1 = new Array(points.length);

  for (var i = 0; i < points.length; i++) {
    points1[i] = {
      x: points[i].x + randomMax(distance),
      y: points[i].y + randomMax(distance)
    }
  }

  var d = `M ${points1[0].x} ${points1[0].y}`;
  for (var i = 1; i < points.length; i++) {
    d += ` L ${points1[i].x} ${points1[i].y}`;
  }
  d += " Z";


  // path.classList.add("hex");

  var rot = randomMax(360);


  path.setAttribute("d", d);



  return path;
}

function randomMax(max) {
  return Math.floor(Math.random() * (max + 1));
}
body {
  display: flex;
  flex-direction: column;
}

.line {
  display: flex;
  justify-content: space-around;
}

.hex {
  fill: #FC635E;
  stroke: #FE8682;
  stroke-width: 2px;
  transition: all .4s;
}

.hex:hover {
  fill: #fff;
  stroke: #FC635E;
}

svg text {
  font-family: FontAwesome;
  font-size: 1.35rem;
  fill: #ffffff;
  pointer-events: none;
  transition: all .4s;
}

.hex:hover+g text {
  fill: #FC635E;
  color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="line">
  <div class="item">
    <svg id="svg01" width="100" height="100" viewBox="-41 -41 82 82">
      <g id="svg01g"  class="hex"></g>
      <g transform="translate(-7, 10)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg02" width="100" height="100" viewBox="-41 -41 82 82">
  <g id="svg02g" class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg03" width="100" height="100" viewBox="-41 -41 82 82">
     <g id="svg03g"  class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>
<div class="line">
  <div class="item">
    <svg id="svg11" width="100" height="100" viewBox="-41 -41 82 82">
      <g id="svg11g"  class="hex"></g>
      <g transform="translate(-7, 10)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg12" width="100" height="100" viewBox="-41 -41 82 82">
  <g id="svg12g" class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg13" width="100" height="100" viewBox="-41 -41 82 82">
     <g id="svg13g"  class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>
<div class="line">
  <div class="item">
    <svg id="svg21" width="100" height="100" viewBox="-41 -41 82 82">
      <g id="svg21g"  class="hex"></g>
      <g transform="translate(-7, 10)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg22" width="100" height="100" viewBox="-41 -41 82 82">
  <g id="svg22g" class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg23" width="100" height="100" viewBox="-41 -41 82 82">
     <g id="svg23g"  class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>
<div class="line">
  <div class="item">
    <svg id="svg31" width="100" height="100" viewBox="-41 -41 82 82">
      <g id="svg31g"  class="hex"></g>
      <g transform="translate(-7, 10)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg32" width="100" height="100" viewBox="-41 -41 82 82">
  <g id="svg32g" class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg33" width="100" height="100" viewBox="-41 -41 82 82">
     <g id="svg33g"  class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>

Стили и часть разметки взяты из ответа St1myL.

4

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
  • Но SVG менее затратный:))
    – Arthur
    25 мар 2018 в 17:03
  • я не в коем случае не спорю .. я сам люблю эту технологию ... но не всем даётся это легко и css многим проще понять чем координаты .. многие даже понятие не имеют что такое эти циферки
    – user33274
    25 мар 2018 в 17:05
  • 1
    Да, ты прав, но единственный путь избавиться от недоумения - это начать изучать SVG
    – Arthur
    25 мар 2018 в 17:06
  • @St1myL да я знаю ... но ни все хотят учится чему то новому ... я как то читал что скоро css вытеснит js и всё что к нему относится ... но правда не ясно когда уже js умрёт
    – user33274
    25 мар 2018 в 17:08
  • 1
    ок ... обязательно
    – user33274
    25 мар 2018 в 17:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.