歪斜的背景和悬停效果与隐藏溢出

Question

我正在进行CSS3导航，但是我对悬停效果的溢出有些麻烦。 我试图添加overflow:hidden - 但没有成功。

这就是它的样子：

这就是它应该是这样的：

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;
}

这是一个小提琴： http://jsfiddle.net/v9dfjq4L/1/

提前致谢！

Answer 1

将背景颜色放在header上，并使用:after元素剪切#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

我建议你玩剪辑路径和面具。以下是一些有用的链接：

Link 1

Link 2

Answer 3

问题解释：

overflow: hidden确实不起作用，因为你将skewY应用于：after元素，它不会影响＃header-top的其余内容。

但是，我发现了解决问题的方法：

删除：事后。将skewY(-4deg)和背景颜色应用于<nav>，并使用<ul>反转内部skewY(4deg)的此变换。现在，overflow: hidden适用于<nav>。

出现了一些新问题：左上角有一个小的白色三角形（修复：padding-top而margin-top为负<nav>），红色悬停不是＆＃39 ; t足够高的某些项目（修复：使用更大的padding-bottom）。

不要忘记使用crossbrowser fallback进行转换（-webkit-， - emz - ， - o - ）。

应用解决方案：

此解决方案适用于此JSFiddle：http://jsfiddle.net/v9dfjq4L/9/