Struggling with creating a navigation bar with angled divs that are stacking on top of each other

I'm a visual designer struggling to code, to cut to the chase, below is the problem:

What I'm trying to achieve:

Goal 1 and Goal 2 screenshots, including my current dilemma, I've placed a link below (as I'm not allowed to include screenshots yet as I am a newbie:

https://www.dropbox.com/s/libc4wp970xz3ms/Screenshot.png?dl=0

What I was hoping to achieve was to have the navigation bar centered all the time. I made it wide (1300px), my white container will be smaller, anything outside of it will be set to hidden.

Below is my code:

    <!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Example Page</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
        <div class ="main-container">
            <div class = "banner-container">
                <div class="cyan-banner"></div>
                <div class="green-banner"></div>
                <div class="magenta-banner"></div>
                <div class="orange-banner"></div>
            </div><!--end of .banner-container-->
        </div><!--end of .main-container-->
    </body>
</html>

@import 'normalize';
@import 'susy';
@import 'compass';

$susy : (
  columns: 12, 
  debug: (image: show),
  output: overlay
);

.main-container {
    @include clearfix;
    @include container(1200px);
    height: 100vh; // Forces wrap to full height.

  // Mobile
  @media (max-width: 419px) {
    @include show-grid(1);
  } 

  // Changing to a 4 column grid
  @media (min-width: 420px) {
    @include show-grid(4);
  }    

  // Changing to a 8 column grid
  @media (min-width: 841px) {
    @include show-grid(8);
  } 

  // Changing to a 12 column grid
  @media (min-width: 1200px) {
    @include show-grid(12);
  }
}

// Color Theme
$cyan: #148ec3; $magenta: #c9197a; $orange: #de8826; $green: #008a52; $gray: #a1a1a0;

body {
    background: #d2d2d2;
}

.main-container {
    background: white;
}

.banner-container {
    @include clearfix;
}

.banner-container > div {
    width: 1300px;
    position: fixed;
    top: 50px;
}

.cyan-banner {
    height: 60px;
    background: $cyan;
    z-index: 5;
}

.green-banner {
    height: 60px;
    background: $green;
    z-index: 4;
    @include transform(rotate(2deg));
}

.magenta-banner {
    height: 60px;
    background: $magenta;
    z-index: 3;
    @include transform(rotate(4deg));
}

.orange-banner {
    height: 60px;
    background: $orange;
    z-index: 2;
    @include transform(rotate(-2deg));
}

Any help or suggestions would be greatly appreciated.

I've been scouring the forums for answers and leads but I can't seem to find one that has a similar problem as mine.

Thank you again.

Anthony

Solution

With one nav and a couple of rotated and translated (and suitably positioned) pseudo elements.

html,
body {
  height: 100%;
}
.container {
  width: 80%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid black;
}
nav {
  height: 75px;
  background: steelblue;
  margin-top: 75px;
  position: relative;
}
nav:before {
  content: '';
  position: absolute;
  width: 150%;
  height: 100%;
  background: orange;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(-2deg);
  z-index: -1;
}
nav:after {
  content: '';
  position: absolute;
  width: 150%;
  height: 100%;
  background-image: linear-gradient(to bottom, magenta 0, magenta 25%, green 25%, green, 75%, magenta 75%, magenta);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(3deg);
  z-index: -1;
}

<div class="container">
  <nav></nav>
</div>

Note that at the moment the 'green' area is only visible at larger screen sizes but media queries could increase the rotation. Alternatively, we may be able to do something with a more refined gradient.