2

Как реализовать косые пункты меню на сайтеЭто меню из игры

1
  • <map> <area> как вариант.
    – user31906
    7 мар 2017 в 16:48

2 ответа 2

4

Если кратко, то используйте transform: skew()

Пример codepen

body {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background: tomato;
}
.skew-menu {
  text-align: center;
  margin-top: 9em;
}
.skew-menu ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: skew(-25deg);
}
.skew-menu ul li {
  background: #fff;
  float: left;
  border-right: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  color: #555;
  font-weight: bolder;
  transition: all 0.3s linear;
}
.skew-menu ul li:first-child {
  border-radius: 7px 0 0 7px;
}
.skew-menu ul li:last-child {
  border-right: none;
  border-radius: 0 7px 7px 0;
}
.skew-menu ul li:hover {
  background: #eee;
  color: tomato;
}
.skew-menu ul li a {
  display: block;
  padding: 1em 2em;
  color: inherit;
  text-decoration: none;
  transform: skew(25deg);
}
<nav class="skew-menu">
  <ul>
    <li><a href="#">Shoes</a></li>
    <li><a href="#">Sandals</a></li>
    <li><a href="#">Shirts</a></li>
    <li><a href="#">Jackets</a></li>
  </ul>
</nav>

2

через transform: skewX(-20deg); Элементы меню у Вас скорее всего li, вот ему и дайте transform: skewX(-20deg);. А на элемент с текстом transform: skewX(20deg);, так вы выровняете текст. Только не давайте transform: skewX(20deg); на тег <а>, так как уголки будут нажимать соседнюю кнопку

Ваш ответ

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

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