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

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

Ответы

Ответ 1

Для гексагонов есть генератор — 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/

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


Ответ 2

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

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

ðс1;


Затем добавил 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);
}


  

    
  
  

    
  
  

    
  





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;
}


  

  


  

  


  

  



Ответ 3

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

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

В данном примере мы делаем 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;
}



  

    
  
  

    
  
  

    
  


  

    
  
  

    
  
  

    
  


  

    
  
  

    
  
  

    
  


  

    
  
  

    
  
  

    
  





Стили и часть разметки взяты из ответа 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;
}

  

    иконка