0

我正在尝试为我用作主导航的每个六边形菜单放置背景图像。但我不知道如何实现将背景图像带入六角形菜单的代码。下面你可以看到 CSS 和 HTML 代码。

CSS 

    ul.hex {padding:0; margin: 50px auto; list-style: none; width:104px; height:60px;       position:relative;} 

    ul.hex li a {display:block; width:104px; height:60px; position:absolute; left:0; top:0;    z-index:100; text-align:center; text-decoration:none; font:normal 18px/60px "Arial"; color: #fff;
    outline: 0;
}

    ul.hex li a:before {display: block; content:""; width:104px; height:60px; position:absolute;    left:0; top:0; z-index:-1;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

ul.hex li a:after {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

ul.hex li:nth-child(1) a,
ul.hex li:nth-child(1) a:before,
ul.hex li:nth-child(1) a:after {background:#cb3927;
}

ul.hex li:nth-child(1) a:hover,
ul.hex li:nth-child(1) a:hover:before,
ul.hex li:nth-child(1) a:hover:after {background-color:#cb3927; color:#fff;
}

ul.hex li:not(:first-child) a,
ul.hex li:not(:first-child) a:before,
ul.hex li:not(:first-child) a:after {background-color:#fff; color:#8d0f26;
}

ul.hex li:not(:first-child) a:hover,
ul.hex li:not(:first-child) a:hover:before,
ul.hex li:not(:first-child) a:hover:after {background-color:#8d0f26; color:#f36e33 ;
}

ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0;
-webkit-transform-origin: -54px 30px;
-moz-transform-origin: -54px 30px;
-ms-transform-origin: -54px 30px;
-o-transform-origin: -54px 30px;
transform-origin: -54px 30px;
}

ul.hex li:nth-child(1) {left:0;}

ul.hex li:nth-child(3) {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

ul.hex li:nth-child(3) a {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

ul.hex li:nth-child(4) {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}

ul.hex li:nth-child(4) a {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg);
}

ul.hex li:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

ul.hex li:nth-child(5) a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}`

这里的HTML 是我用于导航的链接的无序列表

<div id="hexagon">
<ul class="hex">
    <li><a href="">HOME</a></li>
    <li><a href="">ABOUT</a></li>
    <li><a href="">BLOG</a></li>
    <li><a href="">WORK</a></li>
    <li><a href="">CONTACT</a></li>
</ul>
</div>
4

1 回答 1

0

我认为这个先前回答的问题可以派上用场。
他基本上是以稍微不同的方式构建 exagon，实施起来并不难。

于 2013-04-16T22:40:11.347 回答