13

Я пытаюсь создать анимированное шестиугольное меню.

Пожалуйста, посмотрите для лучшего понимания рисунок:

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

Гамбургер кнопка в виде шестиугольника находится в центре.
После нажатия на неё отображаются треугольные фигуры, окружающие кнопку гамбургера.
Значок гамбургера превращается в крест, чтобы при повторном нажатии на него вернуть всё в исходное положение.
В моей поясняющей картинке на самом деле отсутствует один шаг в самом начале. На левой половине картинки должна отображаться только кнопка гамбургера.

Поэтому мой вопрос заключается в следующем:

Как создавать эту анимацию из шестиугольника с помощью HTML, CSS через jQuery или другими способами.

Какие способы вы бы использовали, чтобы сделать это?

Свободный перевод вопроса CSS animated hexagon menu от участника @Julian Livin' in China.

1

2 ответа 2

20

Вот пример и демонстрация:

Hexagon menu demo

И вот анимация gif шестиугольника в действии:

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

Основные функции меню шестиугольника:

  • адаптивность - в зависимости от размера viewport (vmin). Это можно изменить, изменив значения width/height на проценты (соотношение сторон должно поддерживаться см. здесь)

  • Изображения (с тегом <img />), титры и субтитры

  • 6 пунктов меню

  • анимированный значок гамбургера в шестиугольном контуре

  • границы пунктов меню привязаны к треугольникам, чтобы они не перекрывали друг друга. Таким образом, событие click и hover state запускаются только тогда, когда фактический элемент меню - hovered/clicked

  • Может отображаться над изображениями, градиентами или любыми неосновными фонами

Шестиугольная компоновка:

  • CSS3 2d transforms позволяет создавать треугольники skewY() и rotate()

  • элементы меню привязаны к треугольникам с помощью классов - .tr и .clip, unskewed с .clip и возврат поворота связан с классом .content, форма шестиугольника вокруг гамбургера выполнена полигоном SVG (легче сделать и получить лучший результат, чем с CSS

  • Значок гамбургера выполнен с помощью span и двумя псевдоэлементами

Шестиугольное меню с анимацией:

  • треугольники переходят один за другим (translate() и opacity) со свойством transition-delay
  • "bounce effect" для треугольника с анимацией производится с помощью функции transition-timming-function и кубической кривой безье.
  • Значок гамбургера для перекрестной анимации создается путем перехода двух псевдоэлементов (translate() и rotate()) и затухания фона центральных элементов до прозрачного цвета rgba

Hover анимация :

  • эффект наведения гамбургера достигается путем анимации свойства stroke-dashoffset элемента SVG <polygon>.

  • названия элементов и субтитры отображаются при наведении с использованием 3D transforms (translateZ()) и непрозрачности. Изображения одновременно исчезают

Используемая технология:

  • CSS кодируется с помощью SCSS и Autoprefixer, чтобы упростить
    запись, чтение и сокращение. Вы можете увидеть скомпилированный CSS, нажав кнопку Скомпилированный вид в демоверсии
    (скомпилированный CSS также доступен в конце этого сообщения)
  • Использован SVG для шестиугольника вокруг иконки гамбургера
  • HTML для разметки
  • простой JS для переключения анимации с добавлением класса на контейнере

Поддержка браузерами:

  • Я тестировал это меню на IE 11, chrome, FF и opera в системе Windows и меню работает во всех этих браузерах.

  • Chrome и FF визуализируют шрифт с размытием (как видно в анимированном gif, сделанном из хрома), и FF имеет тенденцию создавать зубчатые стороны для треугольников

  • IE 11 имеет наилучшее качество для шрифтов и треугольников, но он не поддерживает анимацию SMIL и, следовательно, не оказывает эффекта наведения на шестиугольник гамбургера

  • Я использовал тестирование crossbrowser для проверки поддержки safari, и в этой системе также работает шестиугольное меню.

var hexNav = document.getElementById('hexNav');

document.getElementById('menuBtn').onclick = function() {
    var className = ' ' + hexNav.className + ' ';
    if ( ~className.indexOf(' active ') ) {
        hexNav.className = className.replace(' active ', ' ');
    } else {
        hexNav.className += ' active';
    }              
}
* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: #E3DFD2;
}

ul {
  list-style-type: none;
}

a, a:hover, a:focus, a:visited {
  text-decoration: none;
}

nav {
  position: relative;
  width: 70vmin;
  height: 70vmin;
  min-width: 500px;
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
}

/** MENU BUTTON ******************************************/
#menuBtn {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 10%;
  height: 10%;
  cursor: pointer;
  z-index: 2;
  will-change: transform;
}
#menuBtn svg {
  display: block;
}
#menuBtn:hover svg polygon {
  -webkit-animation: hexHover 0.7s;
          animation: hexHover 0.7s;
}
#menuBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  padding: 8px 0;
  background-clip: content-box;
  background-color: #585247;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: background-color 0.5s;
          transition: background-color 0.5s;
}
#menuBtn span:before, #menuBtn span:after {
  position: absolute;
  background-color: #585247;
  content: '';
  width: 20px;
  height: 2px;
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
}
#menuBtn span:before {
  top: 0;
}
#menuBtn span:after {
  bottom: 0px;
}

@-webkit-keyframes hexHover {
  0% {
    stroke-dasharray: 0,0,300;
  }
  10% {
    stroke-dasharray: 0,20,300;
  }
  100% {
    stroke-dasharray: 300,20,300;
  }
}

@keyframes hexHover {
  0% {
    stroke-dasharray: 0,0,300;
  }
  10% {
    stroke-dasharray: 0,20,300;
  }
  100% {
    stroke-dasharray: 300,20,300;
  }
}
/** MENU ITEMS *******************************************/
#hex {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.1) translatez(0);
      -ms-transform: scale(0.1) translatez(0);
          transform: scale(0.1) translatez(0);
  -webkit-transition: -webkit-transform 0.05s 0.5s;
          transition: transform 0.05s 0.5s;
}

.tr {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 34.6%;
  height: 40%;
  -webkit-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
  overflow: hidden;
  -webkit-transform: skewY(-30deg);
      -ms-transform: skewY(-30deg);
          transform: skewY(-30deg);
  opacity: 0;
}

.tr:nth-child(1) {
  -webkit-transform: rotate(0deg) skewY(-30deg);
      -ms-transform: rotate(0deg) skewY(-30deg);
          transform: rotate(0deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(1) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(1) .content {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  padding-left: 15%;
  -webkit-perspective-origin: 30% 70%;
          perspective-origin: 30% 70%;
}

.active .tr:nth-child(1) {
  -webkit-transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.05s, -webkit-transform 0.5s 0.05s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.05s, transform 0.5s 0.05s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(2) {
  -webkit-transform: rotate(60deg) skewY(-30deg);
      -ms-transform: rotate(60deg) skewY(-30deg);
          transform: rotate(60deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(2) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(2) .content {
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  top: -8%;
  left: 6.67%;
  padding-left: 30%;
  -webkit-perspective-origin: 30% 50%;
          perspective-origin: 30% 50%;
}

.active .tr:nth-child(2) {
  -webkit-transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.1s, transform 0.5s 0.1s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(3) {
  -webkit-transform: rotate(120deg) skewY(-30deg);
      -ms-transform: rotate(120deg) skewY(-30deg);
          transform: rotate(120deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(3) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(3) .content {
  -webkit-transform: rotate(-150deg);
      -ms-transform: rotate(-150deg);
          transform: rotate(-150deg);
  -webkit-transform-origin: 42.3% 36.5%;
      -ms-transform-origin: 42.3% 36.5%;
          transform-origin: 42.3% 36.5%;
  padding-left: 10%;
  -webkit-perspective-origin: 30% 30%;
          perspective-origin: 30% 30%;
}

.active .tr:nth-child(3) {
  -webkit-transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.15s, -webkit-transform 0.5s 0.15s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.15s, transform 0.5s 0.15s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(4) {
  -webkit-transform: rotate(180deg) skewY(-30deg);
      -ms-transform: rotate(180deg) skewY(-30deg);
          transform: rotate(180deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(4) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(4) .content {
  -webkit-transform: rotate(-210deg);
      -ms-transform: rotate(-210deg);
          transform: rotate(-210deg);
  -webkit-transform-origin: 65.4% 38.4%;
      -ms-transform-origin: 65.4% 38.4%;
          transform-origin: 65.4% 38.4%;
  padding-left: 30%;
  -webkit-perspective-origin: 70% 30%;
          perspective-origin: 70% 30%;
}

.active .tr:nth-child(4) {
  -webkit-transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.2s, transform 0.5s 0.2s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(5) {
  -webkit-transform: rotate(240deg) skewY(-30deg);
      -ms-transform: rotate(240deg) skewY(-30deg);
          transform: rotate(240deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(5) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(5) .content {
  -webkit-transform: rotate(-270deg);
      -ms-transform: rotate(-270deg);
          transform: rotate(-270deg);
  top: -8%;
  left: 6.67%;
  padding-left: 15%;
  -webkit-perspective-origin: 70% 50%;
          perspective-origin: 70% 50%;
}

.active .tr:nth-child(5) {
  -webkit-transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.25s, -webkit-transform 0.5s 0.25s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.25s, transform 0.5s 0.25s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(6) {
  -webkit-transform: rotate(300deg) skewY(-30deg);
      -ms-transform: rotate(300deg) skewY(-30deg);
          transform: rotate(300deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(6) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(6) .content {
  -webkit-transform: rotate(-330deg);
      -ms-transform: rotate(-330deg);
          transform: rotate(-330deg);
  -webkit-transform-origin: 106.7% 25.2%;
      -ms-transform-origin: 106.7% 25.2%;
          transform-origin: 106.7% 25.2%;
  padding-left: 30%;
  -webkit-perspective-origin: 70% 70%;
          perspective-origin: 70% 70%;
}

.active .tr:nth-child(6) {
  -webkit-transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.3s, transform 0.5s 0.3s cubic-bezier(0, 2.3, 0.8, 1);
}

.tr:nth-child(7) {
  -webkit-transform: rotate(360deg) skewY(-30deg);
      -ms-transform: rotate(360deg) skewY(-30deg);
          transform: rotate(360deg) skewY(-30deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
          transition: opacity 0.5s, transform 0.5s;
}
.tr:nth-child(7) .clip {
  -webkit-transform: skewY(30deg) rotate(30deg);
      -ms-transform: skewY(30deg) rotate(30deg);
          transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(7) .content {
  -webkit-transform: rotate(-390deg);
      -ms-transform: rotate(-390deg);
          transform: rotate(-390deg);
}

.active .tr:nth-child(7) {
  -webkit-transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
      -ms-transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
          transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
  -webkit-transition: opacity 0.5s 0.35s, -webkit-transform 0.5s 0.35s cubic-bezier(0, 2.3, 0.8, 1);
          transition: opacity 0.5s 0.35s, transform 0.5s 0.35s cubic-bezier(0, 2.3, 0.8, 1);
}

.clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 116%;
  height: 86.66%;
  overflow: hidden;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}

.content {
  position: absolute;
  width: 86.6%;
  height: 116%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  font-size: 2vmin;
  -webkit-perspective: 500px;
          perspective: 500px;
  background: #000;
}
.content img {
  position: absolute;
  top: 0;
  left: -50%;
  right: -50%;
  margin: auto;
  height: 100%;
  z-index: -1;
  -webkit-transition: opacity 0.3s;
          transition: opacity 0.3s;
  pointer-events: none;
}
.content h2, .content p {
  position: absolute;
  width: 60%;
  line-height: 1em;
  color: #fff;
  opacity: 0;
  -webkit-transform: translateZ(-50px);
          transform: translateZ(-50px);
}
.content h2 {
  bottom: 50%;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 2em;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
          transition: transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
}
.content p {
  position: absolute;
  top: 50%;
  font-size: 1em;
  -webkit-transition: -webkit-transform 0.3s 0.075s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.075s;
          transition: transform 0.3s 0.075s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.075s;
}
.content:hover h2, .content:hover p {
  opacity: 1;
  -webkit-transform: translatez(0);
      -ms-transform: translatez(0);
          transform: translatez(0);
}
.content:hover img {
  opacity: 0.4;
}

.active #menuBtn:hover svg polygon {
  -webkit-animation: none;
          animation: none;
}
.active #menuBtn span {
  background-color: transparent;
}
.active #menuBtn span:before {
  -webkit-transform: translatey(8px) rotate(45deg);
      -ms-transform: translatey(8px) rotate(45deg);
          transform: translatey(8px) rotate(45deg);
}
.active #menuBtn span:after {
  -webkit-transform: translatey(-8px) rotate(-45deg);
      -ms-transform: translatey(-8px) rotate(-45deg);
          transform: translatey(-8px) rotate(-45deg);
}
.active #hex {
  -webkit-transform: scale(0.9) translatez(0);
      -ms-transform: scale(0.9) translatez(0);
          transform: scale(0.9) translatez(0);
  -webkit-transition: none;
          transition: none;
  will-change: transform;
}
.active .tr {
  opacity: 1;
  will-change: transform;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
<nav id="hexNav">
  <div id="menuBtn">
    <svg viewbox="0 0 100 100">
      <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="none" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/>
    </svg>
    <span></span>
  </div>
  <ul id="hex">
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
  </ul>
</nav>

Свободный перевод ответа CSS animated hexagon menu от участника @web-tiki.

1
  • 3
    Ты как всегда на высоте))))
    – Air
    31 янв 2018 в 12:12
15

Вариант с CSS-переменными + clip-path. Тут не вся функциональность, это лишь набросок, но идея, думаю, понятна.

UPD: добавил кнопку и еще немного причесал код.

document.querySelector('.menu__btn').addEventListener('click', () => {
  document.querySelector('.menu').classList.toggle('menu--open');
});
:root {
  --side: 200px;
  --a: 25% 5%;
  --b: 75% 5%;
  --c: 100% 50%;
  --d: 75% 95%;
  --e: 25% 95%;
  --f: 0% 50%;
  --g: 50% 50%;
  --x: 0;
  --y: 0;
  --coordAfter: 25px;
}

.menu {
  width: var(--side);
  height: var(--side);
  padding: 0;
  margin: 50px auto;
  position: relative;
}

.menu__list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.menu__triangle {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform .25s, opacity .25s;
  background-color: #d261ff;
  width: var(--side);
  height: var(--side);
  opacity: 0;
}

.menu__triangle:hover {
  background-color: #9c29c1;
}

.menu--open .menu__triangle {
  transform: translate3d(var(--x), var(--y), 0);
  opacity: 1;
}

.menu__btn {
  border: none;
  background: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #250031;
  clip-path: polygon(var(--a), var(--b), var(--c), var(--d), var(--e), var(--f));
  font-size: 0;
  width: calc(var(--side) / 6);
  height: calc(var(--side) / 6);
  z-index: 1;
  text-align: center;
}

.menu__btn:hover,
.menu--open .menu__btn {
  background-color: #613175;
}

.menu__btn-dash {
  width: calc(var(--side) / 14.285);
  background-color: #fff;
  height: 2px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.menu__btn-dash:after {
  width: inherit;
  height: inherit;
  left: 0;
  top: 0;
  background-color: inherit;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transition: transform .2s;
  position: absolute;
  content: ' ';
}

.menu--open .menu__btn-dash:after {
  transform: rotate(0);
}

.menu__1 {
  clip-path: polygon(var(--a), var(--b) , var(--g));
  --y: calc(var(--coordAfter) * -1);
}

.menu__2 {
  clip-path: polygon(var(--g), var(--b), var(--c));
  --y: calc(var(--coordAfter) * -1/2);
  --x: var(--coordAfter);
}

.menu__3 {
  clip-path: polygon(var(--g), var(--c), var(--d));
  --y: calc(var(--coordAfter) / 2);
  --x: var(--coordAfter);
}

.menu__4 {
  clip-path: polygon(var(--e), var(--g), var(--d));
  --y: var(--coordAfter);
}

.menu__5 {
  clip-path: polygon(var(--f), var(--g), var(--e));
  --x: calc(var(--coordAfter) * -1);
  --y: calc(var(--coordAfter) / 2);
}

.menu__6 {
  clip-path: polygon(var(--f), var(--a), var(--g));
  --x: calc(var(--coordAfter) * -1);
  --y: calc(var(--coordAfter) * -1/2);
}
<menu class="menu">
  <button class="menu__btn">
    <span class="menu__btn-dash">Toggle menu</span>
  </button>
  <ul class="menu__list">
    <li class="menu__triangle menu__1">1</li>
    <li class="menu__triangle menu__2">2</li>
    <li class="menu__triangle menu__3">3</li>
    <li class="menu__triangle menu__4">4</li>
    <li class="menu__triangle menu__5">5</li>
    <li class="menu__triangle menu__6">6</li>
  </ul>
</menu>

5
  • спасибо! (+), а серединку шестиугольник с анимацией добавить? Можно отдельным постом-ответом, но все элементы анимации вместе желательно, а не только треугольники 31 янв 2018 в 15:46
  • 1
    @Alexandr_TT ну теперь вроде бы всё ) 1 фев 2018 в 9:24
  • замечательно! А почему не оформил отдельным ответом второй вариант, я же не смогу поставить тебе второй плюс :) И людям было бы полезней смотреть, как поэтапно решается задача от простого к сложному. Ну я не хочу напрягать, исключительно твоё желание важно. Если хочешь остановиться прямо сейчас, просто поставлю галочку, напиши пожалуйста. Какое примешь решение 1 фев 2018 в 9:37
  • так это же не принципиально новое решение, чтобы это был отдельный ответ, а насчет плюсов — это совсем не страшно ) больше дорабатывать ответ уже не буду. 1 фев 2018 в 9:47
  • хорошо, Твоё решение зачтено. 1 фев 2018 в 9:49

Ваш ответ

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

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