Меню со скошенными углами

309

07 января 2017, 15:31

Есть меню вида

пробовал сделать скошенные края через li:nth-child(2n):after li:nth-child(2n):before вставлять для четных li-шек треугольники (через абсолютное позиционирование) и таким же образом для нечетных… но любое изменение размера окна и все плывет я так понимаю не лучший способ. Пробовал через perspective и tranform: rotateX() но как тогда быть с 1-м последним элементом у которых нет скоса… Подскажите как можно такую менюху реализовать…

вот то что пробовал

ul {
        text-align: center;
        margin: 0px;
        display: flex;
        flex-flow: row wrap;
        padding-left: 0px;
        li{
           padding: 20px 100px 30px 120px;
           text-align: center;
           background-color: #fff;
           flex: 1 1 100px;
           margin-left: 50px;
           box-shadow: 4px -4px 45px rgba(0,0,0,0.5);
           &:nth-child(2n):after{
                            width: 0px;
                            height: 0px;
                            border-bottom: 86px solid #fff;
                            border-right: 30px solid rgba(255, 0, 0, 0);
                            position: absolute;
                            top: 0px;
                            content: "";
                            left: 428px;
                     }
                     &:nth-child(2n):before{
                            width: 0px;
                            height: 100%;
                            border-bottom: 89px solid #fff;
                            border-left: 35px solid rgba(255, 0, 0, 0);
                            position: absolute;
                            bottom: 0px;
                            content: "";
                            left: -34px;
                     }

                     &:nth-child(odd):after{
                            width: 0px;
                            height: 0px;
                            border-top: 90px solid #fff;
                            border-right: 35px solid rgba(255, 0, 0, 0);
                            position: absolute;
                            top: 0px;
                            content: "";
                            left: 428px;
                     }
                      &:nth-child(odd):before{
                            width: 0px;
                            height: 0px;
                            border-top: 90px solid #fff;
                            border-left: 32px solid rgba(255, 0, 0, 0);
                            position: absolute;
                            top: 0px;
                            content: "";
                            left: 929px;
                     }
       }

html

<ul>
    <li><a href="">link<br><span>Boldlink</span></a></li>
    <li><a href="">link<br><span>Boldlin</span></a></li>
    <li><a href="">link<br><span>Boldlin</span></a></li>
    <li><a href="">link<br><span>Boldlink</span></a></li>
</ul>

так я выставил треугольники под определенную ширину экрана на свои места, но тут я не смог исключить 1-й и последний элемент корректно (чтобы у них не отображались треугольники), ну и после малейшего ресайза все треугольники уползают кто куда…

Answer 1

Добавил вот такую разметку. Её плюсы это гибкость и сопровождаемость. Если надо менять угол треугольника, то меняйте skew и width для псевдоэлементов.

Решение через псевдоэлементы

Задаём для каждого нечётного элемента треугольник, а для чётного — перевёрнутый треугольник. Прячем для первого и последнего ребёнка соответствующие псевдоэлементы.

.menu { 
  display: flex; 
} 
 
.menu__item { 
  padding: 20px; 
  text-align: center; 
  background-color: orange; 
  color: white; 
  position: relative; 
  flex-grow: 1; 
} 
 
.menu__item + .menu__item { 
  margin-left: 60px; 
} 
 
.menu__item:before, 
.menu__item:after { 
  position: absolute; 
  content: ""; 
  top: 0; 
  background-color: orange; 
  height: 100%; 
  width: 50px; 
  z-index: -1; 
} 
 
.menu__item:before { 
  left: -50px; 
} 
 
.menu__item:nth-child(odd):before { 
  transform: skewX(-30deg) translateX(50%); 
} 
 
.menu__item:nth-child(even):before { 
  transform: skewX(30deg) translateX(50%);   
} 
 
/* Прячем первый псеводоэлемент */ 
.menu__item:first-child:before { 
  display: none; 
} 
 
.menu__item:after { 
  right: 0; 
} 
 
.menu__item:nth-child(odd):after { 
    transform: skewX(30deg) translateX(50%); 
} 
 
.menu__item:nth-child(even):after { 
  transform: skewX(-30deg) translateX(50%);   
} 
 
/* Прячем последний псеводоэлемент */ 
.menu__item:last-child:after { 
  display: none; 
}

<div class="menu"> 
  <div class="menu__item"> 
    Link 
  </div> 
  <div class="menu__item"> 
    Link 
  </div> 
  <div class="menu__item"> 
    Link 
  </div> 
  <div class="menu__item"> 
    Link 
  </div> 
</div>

Решение через классы

Решение без псевдоселекторов. Указываем явно для элементов треугольники (которые образуют скошенные края) через классы .menu__item--triangle-before, .menu__item--reversed-triangle-before, .menu__item--triangle-after, .menu__item--reversed-triangle-after. Удобно тогда, когда нет чёткой последовательности для элементов меню или часть прячется, или меняется порядок (свойство CSS order) и т.д. То есть данное решение более мощное, чем решение с псевдоселекторами, но требует написания большего количества кода.

.menu { 
  display: flex; 
} 
 
.menu__item { 
  padding: 20px; 
  text-align: center; 
  background-color: orange; 
  color: white; 
  position: relative; 
  flex-grow: 1; 
} 
 
.menu__item + .menu__item { 
  margin-left: 60px; 
} 
 
.menu__item--triangle-before:before, 
.menu__item--reversed-triangle-before:before, 
.menu__item--triangle-after:after, 
.menu__item--reversed-triangle-after:after { 
  position: absolute; 
  content: ""; 
  top: 0; 
  background-color: orange; 
  height: 100%; 
  width: 50px; 
  z-index: -1; 
} 
 
.menu__item--triangle-before:before, 
.menu__item--reversed-triangle-before:before { 
  left: -50px; 
} 
 
.menu__item--triangle-before:before { 
  transform: skewX(-30deg) translateX(50%); 
} 
 
.menu__item--reversed-triangle-before:before { 
  transform: skewX(30deg) translateX(50%);   
} 
 
.menu__item--triangle-after:after, 
.menu__item--reversed-triangle-after:after { 
  right: 0; 
} 
 
.menu__item--triangle-after:after { 
    transform: skewX(30deg) translateX(50%); 
} 
 
.menu__item--reversed-triangle-after:after { 
  transform: skewX(-30deg) translateX(50%);   
}

<div class="menu"> 
  <div class="menu__item menu__item--triangle-after"> 
    Link 
  </div> 
  <div class="menu__item menu__item--reversed-triangle-before menu__item--reversed-triangle-after"> 
    Link 
  </div> 
  <div class="menu__item menu__item--triangle-before menu__item--triangle-after"> 
    Link 
  </div> 
  <div class="menu__item menu__item--reversed-triangle-before"> 
    Link 
  </div> 
</div>