Wedge shaped menu

Question

I've been digging into how to create a wedge shaped menu and came across the following stackoverflow post: Diagonal Wedge Shaped CSS - Edge to Edge Centered in Browser

I've re-purposed the example image Varazi drew up to better explain my own situation (please excuse the old writing on it). I've added 2 menu items, home and contact, to show what I'm trying.

The code I have been playing around with (found from the above link).

HTML

<div class="shape">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS

.shape {
    width:400px;
    margin:0 auto;
}
.top {
    height:0;
    border-width:0 0 150px 400px;
    border-style:solid;
    border-color:transparent #d71f55 #d71f55 transparent;
}
.bottom {
    height: 50px;
    background-color:#d71f55;
}

/* Support transparent border colors in IE6. */
* html .top {
    filter:chroma(color=#123456);
    border-top-color:#123456;
    border-left-color:#123456;
}

---

Update: After playing quite a lot with it, really fun challenge I must say, I have finally gotten it exactly the way I needed it to be with the helpful tip by Talkingrock (thanks man!). My remaining challenge would be showing the .sub-menu inside an overflow: hidden element (#masthead), but it's not overly important as I can have the links plastered on the homepage in the relevant content sections.

Hope the below code helps a poor soul out, such as myself, who needed help. Enjoy! :)

HTML (I'm using WordPress/Bootstrap)

<header id="masthead" class="site-header" role="banner">
    <nav id="site-navigation" class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://demo.dev/" title="demo" rel="home">
                    <img width="159" height="134" src="http://demo.dev/wp-content/uploads/2014/10/logo.png" class="img-responsive" alt="logo">
                </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul id="menu-main-menu" class="nav navbar-nav pull-right">
                    <li><a href="http://demo.dev/">Home</a></li>
                    <li><a href="http://demo.dev/us/">About Us</a></li>
                    <li><a href="http://demo.dev/services/">Services</a>
                        <ul class="sub-menu">
                        <li><a href="http://demo.dev/industrial-electrical/">Industrial Electrical</a></li>
                        <li><a href="http://demo.dev/commercial-electrical/">Commercial Electrical</a></li>
                        <li><a href="http://demo.dev/domestic-electrical/">Domestic Electrical</a></li>
                        </ul>
                    </li>
                    <li><a href="http://demo.dev/contact/">Contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>

CSS (using Less)

/* --- header */

#masthead {
        overflow: hidden;
    position: relative;
        bottom: 50px; height: 200px;
    background: red;
    transform: skew(0deg, -3deg);
}

/* --- main navigation */

#site-navigation {
    position: relative;
        bottom: -50px;
    height: 100%;
        margin-bottom: 0;
    border-radius: 0;
    background: none;
        border: none;
    transform: skew(0deg, 3deg);

    .container,
    .navbar-collapse {
        height: 100% !important;
    }
    .nav {
        height: 100%;

        &>li {
            height: 100%;

            &>a {
                height: 100%;
                    padding: 80px 15px 0;
                color: #fff;
            }
            &.current-menu-item,
            &:hover {
                &>a {
                    background-color: @tree-poppy;
                }
            }
        }
    }
}

---

Update2: Just wanted to quickly mention you can also attach the wedge part to an existing element easily without using any additional elements as well!

CSS

#masthead:after {
    content: "";
    position: absolute;
        top: -45px; left: 0;
        z-index: -1;
    width: 100%; height: 80px;
    background-color: red;
    transform: skew(0deg, -3deg);
}

Answer 1

Here's what I came up with:

The HTML:

<header>
  <nav>
    <a href="#" class="link-1">Home</a>
    <a href="#" class="link-2">Contact</a>
    <a href="#" class="link-3">About</a>
  </nav>
</header>

The CSS:

header {
  overflow: hidden;
  margin-top: -550px;
  height: 850px;
  margin-bottom: -50px;
}

nav {
  width: 120%;
  margin: 0 -10%;
  transform: rotate(-12deg);
  background: red;
  padding: 0 10%;
  overflow: hidden;
}

nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  float: left;
  transform: rotate(12deg);
  background: purple;
  padding-top: 500px;
  padding-bottom: 1000px;
  margin-bottom: -900px;
  text-align: center;
  width: 80px;
  position: relative;
}

.link-1 {
  top: -36px;
}

.link-2 {
  top: -18px;
}

Here's a working example: http://codepen.io/btpoe/pen/GavLk

Please note that this would not work in IE8 or less and would need some sort of fallback.