Trying to skew an ::after but need to hide background part

Question

I'm playing around with css trying to make a slanted nav bar. This is what I have so far:

The eyebleed red is just for visibility.

How can I get rid of the bottom right part of red below the slanted separator? This is my 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;
}

and my 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>

Managed to get it to work like so:

HTML Same as above.

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

Result:

If this can be done a better way please put an answer

The method you've used (`transform-origin`) is in my opinion the correct fix for this case. (*Side Note:* You may want to have a look at this - http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive for alternate approaches.) — Harry, Feb 17 '16 at 07:53

score 0 · Answer 1 · answered Jul 11 '19 at 04:17

Maybe you could do it like this instead. Maybe this would work better?

.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>

Trying to skew an ::after but need to hide background part

1 Answers1