Wedge shaped menu - html

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>Home</li>
<li>About Us</li>
<li>Services
<ul class="sub-menu">
<li>Industrial Electrical</li>
<li>Commercial Electrical</li>
<li>Domestic Electrical</li>
</ul>
</li>
<li>Contact</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>
Home
Contact
About
</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.