A CodePen by Steve Belovarich. CSS3 Ribbon Menu by Steve Belovarich - CSS3 Ribbon Menu that uses pseudo elements, gradients, and transforms to create a sense of depth when the user hovers. I saw another ribbon menu trending online lately, but the buttons came forward instead of appearing like a press down. I prefer this look much better. Instant response. The button presses could be animated, maybe next implementation. 

There's a bug in the last-child right now if you hover over the skewed part, but I don't think I can use jQuery to select the :before pseudo element. When I have time, I'll find a fix. 

The margins on either side of the ul element are styled spans. The right one (.navafter) must have a fixed width to prevent overflow. I wrote a jQuery method (not included here) that styles the width on the fly for Wordpress in the case someone adds or subtracts from the menu, but it effects page load. Do you have a better method for achieving this effect? The ul or nav element cannot have a background because the hover effect would lose it's styling, thus the need for elements on either side.

You can augment for your own purposes, style accordingly.

Currently only tested on webkit, but no reason it shouldn't work in other modern browsers.