我一直在研究如何创建一个楔形菜单并遇到以下stackoverflow帖子:Diagonal Wedge Shaped CSS - Edge to Edge Centered in Browser
我已经重新定位了Varazi为了更好地解释我自己的情况而制定的示例图像(请原谅旧文章)。我添加了两个菜单项,主页和联系人,以显示我正在尝试的内容。
我一直在玩的代码(从上面的链接中找到)。
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 < / em>(谢谢男人!)。我剩下的挑战是在.sub-menu
元素(overflow: hidden
)中显示#masthead
,但它并不过分重要,因为我可以在相关主页上贴上链接内容部分。
希望以下代码可以帮助一个需要帮助的穷人,比如我自己。请享用! :)
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);
}
答案 0 :(得分:2)
这是我想出的:
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或更低版本中无效,需要某种后备。