Beveled background and hover effect with hidden overflow

Question

I am working on CSS3 navigation, but I have some problems with overflowing the hover effect. I tried to add overflow:hidden - without success.

It looks like this:

And this is how it should look:

HTML:

 <header> <div id="header-top"> <nav id="main-navigation" role="navigation"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Events</a></li> <li><a href="#">Artists</a></li> </ul> </nav> </div> 

CSS

 #header-top { height: 70px; left: 0; position: fixed; right: 0; top: 0; z-index: 100; } #header-top:after { background: rgba(0,0,0,0.35); content: ""; height: 120px; position: absolute; top: -50px; left: 0px; transform: skewY(-4deg); width: 100%; z-index: -1; } #main-navigation ul { display: inline; float: right; padding: 0; margin: 0; } #main-navigation ul li { display: inline; line-height: 30px; } #main-navigation ul li a { display: inline-block; font-size: 14px; font-weight: 400; color: #fff; padding: 20px; } #main-navigation ul li a:hover { padding: 20px; background-color: red; } 

Here is the fiddle: http://jsfiddle.net/v9dfjq4L/1/

Thanks in advance!

Answer 1

put the background color in the header and use the :after element to copy the bottom of #header-top . http://jsfiddle.net/ovtphrqL/

 #header-top:after { background: rgba(255, 255, 255, 1); content: ""; height: 120px; position: absolute; top: 74px; left: 0px; transform: skewY(-3deg); width: 100%; z-index: 5; } 

Answer 2

I suggest you play with the clip and mask. Here are some useful links:

Link 1

Link 2

Answer 3

Explanation of the problem:

overflow: hidden doesn’t really work because you applied skewY to the after element after that, which does not affect the rest of the # header-top content.

However, I found this solution for your problem:

Remove: after. Apply skewY(-4deg) and background-color to <nav> and invert this conversion for the internal <ul> using skewY(4deg) . Now overflow: hidden will work when applied to <nav> .

A few new problems will appear: a small white triangle in the upper left corner (fix: padding-top and negative margin-top for <nav> ), and a red tilt is not enough for some elements (fix: use a larger padding-bottom ).

Remember to use a cross-browser backup for conversion (-webkit-, -moz-, -o-).

Applied Solution:

This solution applies in this JSFiddle: http://jsfiddle.net/v9dfjq4L/9/