Html 尝试倾斜：：after，但需要隐藏背景部分

我正在玩css，试图制作一个倾斜的导航条。这就是我到目前为止所做的：

红色的眼睛只是为了看得清楚

如何去除倾斜分离器下方的红色右下角部分？这是我的CSS：

nav.navbar-hero {
    position: relative;
    background-color: #191919;
    border-radius: 0;
    z-index: 2;
    height: 160px;
}

nav.navbar-hero::after {
    content: "";
    position: absolute;
    left: 0;
    top: 105px;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 40px;
    overflow: visible;
    z-index: 3;
    background-color: #FFF;
    transform: skewY(-8deg);
    -webkit-transform: skewY(-8deg);
}

ul.nav.navbar-nav {
    position: relative;
    top: 30px;
    left: 30px;
}

.navbar-brand {
    position: relative;
    top: 30px;
}

还有我的html

<nav class="navbar navbar-hero fadeIn animated">
  <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" class="navbar-toggler hidden-sm-up">☰</button>
  <div id="exCollapsingNavbar2" class="collapse navbar-toggleable-xs"><a class="navbar-brand" [routerLink]="['Home']">Website <i class="fa fa-step-forward" style="color: #0275d8; font-size: 18px;"></i></a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" [routerLink]="['Home']">Home
          <span class="sr-only"></span>
        </a>
      </li>
      <li class="nav-item"><a class="nav-link" [routerLink]="['Register']">Register</a></li>
    </ul>
  </div>
</nav>

结果:

---

如果这可以做得更好，请给出一个答案，也许你可以这样做。也许这样会更好

.shape{
位置：相对位置；
颜色：白色；
高度：20vh；
宽度：40vw；
背景：灰色；
}
.形状：之后{
位置：绝对位置；
内容：''；
左：0px；
右：0px；
顶部：20vh；
边框宽度：10vh 20vw；
边框样式：实心；
边框颜色：灰灰色rgba（0,0,0,0）rgba（0,0,0,0）；
}

---

链接

也许你可以这样做。也许这样会更好

.shape{
位置：相对位置；
颜色：白色；
高度：20vh；
宽度：40vw；
背景：灰色；
}
.形状：之后{
位置：绝对位置；
内容：''；
左：0px；
右：0px；
顶部：20vh；
边框宽度：10vh 20vw；
边框样式：实心；
边框颜色：灰灰色rgba（0,0,0,0）rgba（0,0,0,0）；
}

Link

在我看来，您使用的方法（

transform origin

）是解决这种情况的正确方法。（旁注：您可能想看看这一点——寻找替代方法。）我认为您使用的方法（

变换原点

）是解决这种情况的正确方法。（旁注：您可能想看看这一点——寻找替代方法。）

nav.navbar-hero {
    position: absolute;
    width: 100%;
    background-color: #191919;
    border-radius: 0;
    z-index: 2;
    height: 50px;
}
nav.navbar-hero::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0px;
    width: 100%;
    height: 175px;
    z-index: -1;

    background: #191919;
    border-bottom: 20px solid #FFF;

    transform-origin: 0% 100%;
    -ms-transform: skewY(-5deg);
    -webkit-transform: skewY(-4deg);
    transform: skewY(-4deg);
}