Ребята, подскажите, пожалуйста, как мне решить следующую задачу:
Есть следующая разметка:
nav.nav
ul.nav__list
li.nav__item
a.nav__item-link(href="#") Players
li.nav__item
a.nav__item-link(href="#") Coaches
li.nav__item
a.nav__item-link(href="#") Refereed
li.nav__item
a.nav__item-link(href="#") Volunteers
li.nav__item
a.nav__item-link(href="#") Cups & Competitions
li.nav__item
a.nav__item-link(href="#") Leagues & Clubs
li.nav__item
a.nav__item-link(href="#") News
li.nav__item
a.nav__item-link(href="#") About
Использую следующие свойства для трансформации
.nav {
&__list {
font-size: 0;
}
&__item {
@include inlineblock;
transform: skew(-23deg, 0deg);
background: $blue;
padding: 21px;
&:hover {
background-color: $dark-blue;
}
}
&__item-link {
@include inlineblock;
width: 100%;
height: 100%;
color: $white;
text-decoration: none;
font-size: 18px;
transform: skew(23deg, 0deg);
}
}
В результате у меня появляются пробелы пространства между транчформированными элементами. Подскажите пожалуйста как их убрать.