CodePen Embed - Triangular Sidebar Menu (webkit only)

<div class="demo">
  <div class="demo__top"></div>
  <div class="demo__light"></div>
  <div class="demo__content">
    <div class="demo__menu page-active-1">
      <div class="demo__menu-item demo__menu-item-1 m--btn js-menuBtn" data-page="1">
        <span class="demo__menu-item-content">1</span>
      </div>
      <div class="demo__menu-item demo__menu-item-2" data-page="2">
        <span class="demo__menu-item-content">2</span>
      </div>
      <div class="demo__menu-item demo__menu-item-3" data-page="3">
        <span class="demo__menu-item-content">3</span>
      </div>
      <div class="demo__menu-item demo__menu-item-4" data-page="4">
        <span class="demo__menu-item-content">4</span>
      </div>
      <div class="demo__menu-item demo__menu-item-5" data-page="5">
        <span class="demo__menu-item-content">?!</span>
      </div>
    </div>
    <div class="demo__page demo__page-1 active">
      <h2 class="demo__page-heading">
        BMW i<span class="demo__page-heading-colored">8</span>
      </h2>
      <h3 class="demo__page-subheading">Concept</h3>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-2">
      <h2 class="demo__page-heading">Page 2</h2>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-3">
      <h2 class="demo__page-heading">Page 3</h2>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-4">
      <h2 class="demo__page-heading">Page 4</h2>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-5">
      <h2 class="demo__page-heading">Links</h2>
      <a class="demo__page-link" href="https://twitter.com/NikolayTalanov" target="_blank">My Twitter</a>
      <a class="demo__page-link" href="https://codepen.io/suez/public/" target="_blank">My Codepen</a>
      <div class="demo__page-poly"></div>
    </div>
  </div>
</div>

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1;
}
html, body {
  font-size: 62.5%;
  height: 100%;
}
body {
  background: radial-gradient(circle , darken(#3E657B, 10%) 0%, #101821 100%);
}
$openSans: 'Open Sans', Helvetica, Arial, sans-serif;

$width: 25.8rem;
$height: 56rem;
$menuItems: 5;
.demo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: $width/-2;
  margin-top: $height/-2;
  width: $width;
  height: $height;
  background: #FFFFFF;
  border-radius: 3.4rem;
  padding: 5rem 0;
  font-family: $openSans;

  &__top {
    position: absolute;
    left: 50%;
    margin-left: -2.2rem;
    top: 2.4rem;
    width: 4.4rem;
    height: 0.5rem;
    background: #0A0D11;
    border-radius: 1rem;
    border: 1px solid #0A0D11;
  }
  
  &__light {
    position: absolute;
    left: 0;
    top: 18.4rem;
    width: 5rem;
    height: 8rem;
    box-shadow: -2.5rem 0 10rem #0081C8;
    border-radius: 50%;
    transition: all 0.5s;
    
    &.menu-active {
      top: 14rem;
      width: 8rem;
      height: 27rem;
      box-shadow: -3rem 0 15rem #0081C8;
    }
  }

  &__content {
    z-index: 1;
    position: relative;
    height: 100%;
    background: #103142;
    overflow: hidden;
  }

  &__menu {
    position: absolute;
    left: 0;
    top: 13.5rem;
    
    $initTop: -6.4rem;
    $itemHeight: 10.6rem;
    $totalMenuAnimDelay: 0.4s + 0.1s * $menuItems;
    
    &:after {
      z-index: -2;
      content: "";
      position: absolute;
      left: 0;
      top: $initTop;
      width: 9.2rem;
      height: $itemHeight/2 * ($menuItems + 1) + 0.1rem * ($menuItems - 1);
      clip-path: polygon(0 0 , 100% $itemHeight/2, 100% ($itemHeight/2 * $menuItems + 0.1rem * ($menuItems - 1)), 0 100%);
      pointer-events: none;
      transition: all 0.2s;
      opacity: 0;
    }
    
    &.menu-active:after {
      z-index: 10;
      opacity: 1;
      transition: all 0.6s $totalMenuAnimDelay;
    }
    
    @for $i from 1 through $menuItems {
      &.page-active-#{$i}:after {
        background: linear-gradient(rgba(0,0,0,0.1 * $i - 0.05) 0%, rgba(0,0,0,0) (20% * $i - 10%), rgba(0,0,0,0.1 * ($menuItems - $i + 1) - 0.05) 100%);
      }
    }

    &-item {
      z-index: -1;
      position: absolute;
      left: 0;
      width: 9.2rem;
      height: $itemHeight;
      background-color: #0299DC;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      cursor: pointer;
      overflow: hidden;
      transition: all 0.7s, -webkit-clip-path 0.4s;
      opacity: 0;
      
      @for $i from 1 through $menuItems {
        &-#{$i} {
          top: $initTop + ($i - 1) * ($itemHeight/2 + 0.1rem);
          transition-delay: 0.2s + 0.1s * ($i - 1);
          
          .menu-active & {
            transition-delay: 0.1s * ($i - 1);
          }
        }
      }
      
      &:nth-child(even) {
        clip-path: polygon(100% 0, 0 50%, 100% 100%);
        
        &:after {
          transform: translate3d(6rem, 0, 0) rotate(90deg);
        }
        
        .demo__menu-item-content {
          transform: translate3d(6rem, 0, 0);
        }
      }
      
      &-1 {
        transform: translate(0, -14rem);
      }
      
      &-2 {
        transform: translate(2rem, -22rem);
      }
      
      &-3 {
        transform: translate(-100%, 0);
      }
      
      &-4 {
        transform: translate(2rem, 22rem);
      }
      
      &-5 {
        transform: translate(0, 14rem);
      }
      
      .menu-active & {
        z-index: 2;
        opacity: 1;
        transform: translate(0, 0);
      }

      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -0.6rem;
        width: 1.6rem;
        height: 1.2rem;
        background: linear-gradient(#fff 0, #fff 0.2rem, transparent 0.2rem, transparent 0.5rem, #fff 0.5rem, #fff 0.7rem, transparent 0.7rem, transparent 1rem, #fff 1rem, #fff 100%);
        transform: translate3d(2rem, 0, 0) rotate(90deg);
        transition: transform 0.7s, opacity 0.7s;
        transition-delay: inherit;
        opacity: 0;
      }

      &-content {
        position: absolute;
        margin-top: -0.8rem;
        left: 0;
        top: 50%;
        min-width: 1.6rem;
        text-align: center;
        font-size: 1.6rem;
        color: #fff;
        transition: transform 0.7s, opacity 0.7s;
        transition-delay: inherit;
        transform: translate3d(2rem, 0, 0);

        .m--btn & {
          transform: translate3d(1.6rem, 0, 0) rotate(-90deg);
          opacity: 0;
        }
      }

      &.m--btn {
        z-index: 5;
        position: absolute;
        left: 0;
        top: 0;
        width: 6.8rem;
        height: 7.8rem;
        opacity: 1;
        transform: translate(0,0);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        
        &:after {
          transform: translate3d(1.6rem, 0, 0);
          opacity: 1;
        }
      }
    }
  }

  &__page {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 4.8rem 0 0 2.2rem;
    transform-origin: 100% 50%;
    transition: all 0.5s 0.5s ease-in-out, opacity 0.5s 0s ease-in-out;
    transform: translate3d(0,0,0);
    opacity: 0;
    will-change: transform, opacity, filter;
    
    &.active {
      z-index: 1;
      opacity: 1;
    }

    &.menu-active {
      transform: scale(0.7) translate3d(30%, 0, 0);
      transition: all 0.5s ease-in-out;
      filter: blur(2px);
    }

    &-heading {
      margin-bottom: 0.5rem;
      font-size: 2.6rem;
      color: #fff;

      &-colored {
        color: #0299DC;
      }
    }

    &-subheading {
      font-size: 1rem;
      color: #C9CED6;
      text-transform: uppercase;
    }
    
    &-link {
      display: block;
      font-size: 1.6rem;
      color: #0299DC;
      margin-bottom: 0.5rem;
      text-decoration: none;
    }

    &-poly {
      position: absolute;
      left: 0;
      bottom: 0.1rem;
      width: 100%;
      height: 39.4rem;
      background-color: #fff;
      clip-path: polygon(0 100%, 13rem 100%, 100% 31.8rem, 100% 0, 0 14.8rem);
      
      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 14.8rem;
        width: 100%;
        height: 16.9rem;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .demo__page-1 &:after {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/carapp-1.png');
      }
      .demo__page-2 &:after {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/carapp-2.jpg');
      }
      .demo__page-3 &:after {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/carapp-3.jpg');
      }
      .demo__page-4 &:after {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/carapp-4.jpg');
      }
      .demo__page-5 &:after {
        background-image: url('//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg');
        background-size: auto 16rem;
        background-position: center center;
      }
    }
  }
}

View Compiled

$(document).ready(function() {
  
  var animating = false;
  
  function menuToggle() {
    $(".demo__page, .demo__menu, .demo__light").toggleClass("menu-active");
    $(".js-menuBtn").toggleClass("m--btn");
    $(document).off("click", ".demo__content", closeNotFocusedMenu);
  };
  
  function closeNotFocusedMenu(e) {
    if (!$(e.target).closest(".demo__menu").length) {
      menuToggle();
      $(document).off("click", ".demo__content", closeNotFocusedMenu);
    }
  };
  
  $(document).on("click", ".js-menuBtn", function() {
    if (animating) return;
    menuToggle();
    $(document).on("click", ".demo__content", closeNotFocusedMenu);
  });
  
  $(document).on("click", ".demo__menu-item:not(.js-menuBtn)", function() {
    animating  = true;
    var $this = $(this);
    var page = +$this.data("page");
    $(".js-menuBtn").removeClass("js-menuBtn");
    $(".demo__page.active").removeClass("active");
    $this.addClass("js-menuBtn m--btn");
    $(".demo__page-"+page).addClass("active");
    $(".demo__page, .demo__menu, .demo__light").removeClass("menu-active");
    $(document).off("click", ".demo__content", closeNotFocusedMenu);
    setTimeout(function() {
      $(".demo__menu")[0].className = $(".demo__menu")[0].className.replace(/\bpage-active-.*\b/gi, "");
      $(".demo__menu").addClass("page-active-"+page);
      animating = false;
    }, 1000);
  });
  
});

This Pen is owned by Nikolay Talanov on CodePen.

See more by @suez on CodePen

External CSS

https://fonts.googleapis.com/css?family=Open+Sans

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js