Изогнутое меню Отзывчивый возможно? - PullRequest
Новая
       4

Изогнутое меню Отзывчивый возможно?

0 голосов
/ 31 января 2019

клиент хочет изменить свое старое меню на своем веб-сайте, которое я должен сделать для него.Выглядит это так:

Изогнутое меню

Я попробовал какой-то код с svg и т. Д., Но я не получил его на работу.

Это так?даже возможно сделать навигацию / меню как это отзывчивым?

Может быть, вы можете помочь мне с небольшим намеком или что-то.Был бы рад этому!

Заранее спасибо.

1 Ответ

0 голосов
/ 31 января 2019

Да, вы можете использовать SVG.Затем вы можете установить его z-index выше, таким образом, вы будете выводить его вперед на странице.Меню будет иметь z-index ниже, чем SVG.Каждый пункт меню будет иметь transform: translateY(), перемещая его вверх.Таким образом, вы разместите каждый из них по-разному.Наконец, вы будете изменять height каждого элемента, чтобы компенсировать смещение transform.

Примерно так: 

.item1 {
  transform: translate(-20px);
  height: 100px;
}
.item2 {
  transform: translate(-40px);
  height: 120px;
}
.item3 {
  transform: translate(-60px);
  height: 140px;
}

Надеюсь, это поможет.

...