楔形菜单

Question

我一直在研究如何创建一个楔形菜单并发现了以下 stackoverflow 帖子：Diagonal Wedge Shaped CSS - Edge to Edge Centered in Browser

我重新设计了 Varazi 绘制的示例图像，以更好地解释我自己的情况（请原谅上面的旧文字）。我添加了 2 个菜单项，家庭和联系人，以显示我正在尝试的内容。

我一直在玩的代码（从上面的链接中找到）。

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

---

更新：在玩了很多次之后，我必须说真的很有趣的挑战，我终于完全按照我需要的方式获得了它，Talkingrock（谢谢老兄！）。我剩下的挑战是在 overflow: hidden 元素 (#masthead) 中显示 .sub-menu，但这并不太重要，因为我可以将链接贴在主页上的相关内容部分。

希望下面的代码可以帮助像我这样需要帮助的可怜人。享受！ :)

HTML（我使用的是 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（使用 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;
                }
            }
        }
    }
}

---

更新 2： 只是想快速提一下，您还可以轻松地将楔形部分附加到现有元素上，而无需使用任何其他元素！

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

这是我想出的：

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>

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

这是一个工作示例：http://codepen.io/btpoe/pen/GavLk

请注意，这在 IE8 或更低版本中不起作用，需要某种回退。