0

Уважаемые коллеги. Подскажите как сделать такие концы меню в хедере. Элементы при :hover должны менять бэкграунд и добавляться border слева и справа. При наведении на крайние элементы списка треугольники тоже должны подсвечиваться. а сама менюшка сделана фиксированной(просто для инфы). Подскажите как реализовать такие треугольнички и что ВАЖНО - у них есть border вопрос

2 ответа 2

4

Пример

*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: #000;
}

.navbar {}

.navbar__menu {
  margin: 15px auto;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  max-width: 700px;
  border-top: 2px solid green;
  border-bottom: 2px solid green;
}

.navbar__item {
  list-style: none;
  height: 100%;
  width: 25%;
}

.navbar__link {
  padding-left: 15px;
  padding-right: 15px;
  color: #000;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar__item:first-of-type .navbar__link:before,
.navbar__item:first-of-type .navbar__link:after,
.navbar__item:last-of-type .navbar__link:before,
.navbar__item:last-of-type .navbar__link:after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.navbar__item:first-of-type .navbar__link:before,
.navbar__item:first-of-type .navbar__link:after {
  right: 100%;
}

.navbar__item:first-of-type .navbar__link:before {
  top: -2px;
  border-width: 0 70px 70px 0;
  border-color: transparent green transparent transparent;
}

.navbar__item:first-of-type .navbar__link:after {
  border-width: 0 66px 66px 0;
  border-color: transparent #fff transparent transparent;
}

.navbar__item:last-of-type .navbar__link:before,
.navbar__item:last-of-type .navbar__link:after {
  left: 100%;
}

.navbar__item:last-of-type .navbar__link:before {
  top: -2px;
  border-width: 70px 70px 0 0;
  border-color: green transparent transparent transparent;
}

.navbar__item:last-of-type .navbar__link:after {
  border-width: 66px 66px 0 0;
  border-color: #fff transparent transparent transparent;
}

.navbar__item:hover .navbar__link {
  background: green;
  color: #fff;
}

.navbar__item:hover:first-of-type .navbar__link:after,
.navbar__item:hover:last-of-type .navbar__link:after {
  opacity: 0;
}
<nav class="navbar">
  <ul class="navbar__menu">
    <li class="navbar__item"><a href="#" class="navbar__link">Link</a></li>
    <li class="navbar__item"><a href="#" class="navbar__link">Link</a></li>
    <li class="navbar__item"><a href="#" class="navbar__link">Link</a></li>
    <li class="navbar__item"><a href="#" class="navbar__link">Link</a></li>
  </ul>
</nav>

5
  • нужно еще добавить .navbar { margin-left: 70px; } чтобы видно было первый треугольник 26 авг 2018 в 7:56
  • @Ruslan Semenov - треугольники видно на декстопе, для мобильной адаптации - как вариант использовать гамбургер
    – soledar10
    26 авг 2018 в 8:04
  • codepen.io/likeavenus/pen/JaGOPM попробовал реализовать, но не вижу почему не работает 26 авг 2018 в 8:57
  • 1
    .item:last-of-type .link:after, - запятую необходимо убрать
    – soledar10
    26 авг 2018 в 9:02
  • о господи) спасибо большое! 26 авг 2018 в 9:23
1

Тут несколько вариантов, первый clip-path можно и бордерами

.nav {
  width: 100%;
  background: blue;
  color: white;
  -webkit-clip-path: polygon(0 0, 100% 0, 92% 100%, 5% 100%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 5% 100%);
  padding: 5px;
}

.nav ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }
  
.nav li{
  text-transform: uppercase;
  list-style: none;
  padding: 0 1rem;
}
<nav class="nav">
  <ul>
    <li>первый</li>
    <li>второй</li>
    <li>третий</li>
  </ul>
</nav>

1
  • нужно что бы у треугольников были бордеры , и как описано в вопросе, чтобы подсвечивались вместе с ближайшей к нему ссылкой менюшки. 25 авг 2018 в 10:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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