Пробелы при использовании свойства transform: skew(-23deg, 0deg);
 

Ребята, подскажите, пожалуйста, как мне решить следующую задачу:
Есть следующая разметка:

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);
  }
}

В результате у меня появляются пробелы пространства между транчформированными элементами. Подскажите пожалуйста как их убрать.