Tilted Sliding Navigation With CSS Clip Path

Preview:

Description:

A tilted sliding drawer navigation (off-canvas menu) with an animated hamburger button, built using JavaScript, CSS3 animations and clip path.

How to use it:

Code the drawer navigation.

<div class="menu">
  <p>Menu Item #1</p>
  <p>Menu Item #2</p>
  <p>Menu Item #3</p>
</div>
<div class="menu__toggler">
  <span></span>
</div>

Style & animate the hamburger button.

.menu__toggler {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {
  position: absolute;
  content: '';
  width: 28px;
  height: 2.5px;
  background: #fafafa;
  border-radius: 20px;
  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu__toggler span::before {
  top: -8px;
}
.menu__toggler span::after {
  top: 8px;
}
.menu__toggler.active > span {
  background: transparent;
}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {
  background: #005c9c;
  top: 0px;
}
.menu__toggler.active > span::before {
  -webkit-transform: rotate(-225deg);
          transform: rotate(-225deg);
}
.menu__toggler.active > span::after {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}

The main CSS/CSS3 for the drawer navigation.

.menu {
  position: absolute;
  left: -30%;
  z-index: 998;
  color: #005c9c;
  background: rgba(250, 250, 250, 0.7);
  -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  width: 30%;
  height: 100%;
  padding: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
}
@media only screen and (max-width: 600px) {
  .menu {
    width: 250px;
    left: -250px;
    padding: 50px;
  }
}
.menu.active {
  left: 0;
}
.menu p {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

JavaScript is used only to toggle CSS classes when opening/closing the drawer navigation.

const toggler = document.querySelector('.menu__toggler');
const menu = document.querySelector('.menu');
toggler.addEventListener('click', () => {
  toggler.classList.toggle('active');
  menu.classList.toggle('active');
});