Html 楔形菜单

我一直在钻研如何创建楔形菜单，遇到了以下stackoverflow帖子：

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

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

HTML

---

更新：在玩了很多之后，我必须说，这是一个非常有趣的挑战，我终于用Talkingrock提供的有用提示得到了它（谢谢你！）。我剩下的挑战是在

溢出：隐藏的
元素（
#报头
）中显示
.sub菜单
），但这并不太重要，因为我可以在主页的相关内容部分粘贴链接

希望下面的代码能帮助一个可怜的灵魂，比如我自己，谁需要帮助。享受！：）

HTML（我正在使用WordPress/Bootstrap）


更新2:只想快速提及，您还可以轻松地将楔形零件附加到现有图元，而无需使用任何其他图元

CSS

以下是我的想法：

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>

下面是一个工作示例：

请注意，这在IE8或更低版本中不起作用，需要某种回退。
请发布相关代码，可能通过JSFIDLE（或类似方式）。我今天看到了一个这种布局的实例，包括您可能感兴趣的菜单项。其网址为www.1和1.com。它们使用绝对定位、倾斜的div覆盖收割台区域的底部。它具有标准的div设置，这些设置会随您的设计而变化，例如顶部和左侧，以及高度和宽度。关键样式为背景色：#ffffff（设置为与网站背景颜色匹配）；和变换：倾斜（0度，-3度）；创建角度。@Talkingrock嗨，谢谢你的提示！最后我自己也这么做了，因为这是唯一能在所有设备上运行的东西。再次感谢朋友！：）感谢您发布这个有趣问题的解决方案：）我尝试使用div上的边框来创建三角形的白色楔子，但它很凌乱，需要在容器上隐藏溢出（当涉及菜单时，这不是一个好主意）。我还创建了几个不同角度的彩色倾斜div，并使用z索引将它们分层到菜单项的前后，以获得一种很酷的效果。这很聪明，你倾斜了#报头。这里是JSFiddle，其中倾斜div绝对位于底部，z索引用于分层。嗨，布兰登，非常感谢你的回答！我只是在调整它，看看是否可以与上面的内容相匹配，但您已经让我走上了正确的轨道：）
.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;
}

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

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

#masthead:after {
    content: "";
    position: absolute;
        top: -45px; left: 0;
        z-index: -1;
    width: 100%; height: 80px;
    background-color: red;
    transform: skew(0deg, -3deg);
}

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

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