Html 背景图像使用倾斜是否会导致间隙？

好的，当在一个倾斜的元素上使用背景图像时，它似乎造成了一个间隙，我不知道为什么。如果项目没有倾斜，则没有间隙。原因是什么？我如何解决问题

你可以在电视上看到这个问题

HTML

<ul id="menu-main-menu" class="navbar-nav">
  <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-143 nav-item"><a href="#about" class="nav-link">About</a></li>
  <li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-144 nav-item"><a href="#gameplay" class="nav-link">Gameplay</a></li>
  <li id="menu-item-145" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-145 nav-item"><a href="#crowd" class="nav-link">Crowd Funding</a></li>
  <li id="menu-item-146" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-146 nav-item"><a href="#mail" class="nav-link">Mail</a></li>
  <li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-147 nav-item"><a href="#contact" class="nav-link">Contact</a></li>
  <li id="menu-item-148" class="menu-download menu-item menu-item-type-custom menu-item-object-custom menu-item-148 nav-item"><a target="_blank" href="#!" class="nav-link">Download</a></li>
</ul>

歪斜版本：

正常版本：

---

为什么不将整个容器倾斜？为了确保你只有一个歪斜的元素，并且你的背景太小，你需要依靠

background repeat

，这显然是歪斜元素的问题，添加

background repeat:no repeat所以看看会发生什么，试着用一个更大的图像。保存了一个背景大小的新资产：170px 73px，仍然有相同的问题。添加了UL元素的倾斜，解决了问题，谢谢！
body {
  background: #000;
}

a {
  color: #FFF;
  margin: 0 20px;
  text-decoration: none;
}

.navbar-nav > li {
    padding: 0;
    background: url(https://indie.nathandasilva.co.uk/wp-content/themes/indie/assets/img/menu-bg.png);
    background-size: 1px 63px;
    height: 63px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skew(0);
}

.navbar-nav {
    padding: 16px 0px 16px 21px !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-nav > li a {
    transform: skew(0deg);
    font-family: 'BebasNeue-Regular', sans-serif !important;
    font-size: 26px !important;
}