Question

我正在玩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>

管理让它像这样工作：

HTML与上述相同。

CSS：

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

结果：

如果可以做得更好，请回答

Answer 1

也许您可以这样做。也许这样会更好？

.shape {
    position: relative;
    color: white;
    height: 20vh;
    width: 40vw;
    background: grey;
}
.shape:after {
    position: absolute;
    content: '';
    left: 0px;
    right: 0px;
    top: 20vh;
    border-width: 10vh 20vw;
    border-style: solid;
    border-color: grey grey rgba(0,0,0,0) rgba(0,0,0,0);
}

<div class="shape"> Link Link Link Link Link</div>

试图扭曲::之后但需要隐藏背景部分

1 个答案: