六边形 html 导航菜单,CSS实现多彩的六边形蜂窝菜单
时间: 2024-01-05 20:22:42 浏览: 20
以下是一个使用 HTML 和 CSS 实现多彩的六边形蜂窝菜单的代码示例:
HTML 代码:
```html
<div class="hex-menu">
<a href="#" class="hex-link">
<div class="hexagon hexagon1">
<div class="hexagon-inner"></div>
<span class="hex-label">Home</span>
</div>
</a>
<a href="#" class="hex-link">
<div class="hexagon hexagon2">
<div class="hexagon-inner"></div>
<span class="hex-label">About</span>
</div>
</a>
<a href="#" class="hex-link">
<div class="hexagon hexagon3">
<div class="hexagon-inner"></div>
<span class="hex-label">Services</span>
</div>
</a>
<a href="#" class="hex-link">
<div class="hexagon hexagon4">
<div class="hexagon-inner"></div>
<span class="hex-label">Portfolio</span>
</div>
</a>
<a href="#" class="hex-link">
<div class="hexagon hexagon5">
<div class="hexagon-inner"></div>
<span class="hex-label">Contact</span>
</div>
</a>
</div>
```
CSS 代码:
```css
.hex-menu {
margin: 50px auto;
width: 600px;
}
.hex-link {
float: left;
margin: 0 -24px;
width: 33.3333%;
text-align: center;
}
.hexagon {
position: relative;
width: 100%;
padding-bottom: 115%;
overflow: hidden;
margin: 0 auto;
cursor: pointer;
}
.hexagon-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(30deg);
background-color: #f5f5f5;
}
.hexagon:before,
.hexagon:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: inherit;
}
.hexagon:before {
transform: rotate(-60deg);
}
.hexagon:after {
transform: rotate(60deg);
}
.hexagon1 .hexagon-inner {
background-color: #ff9933;
}
.hexagon2 .hexagon-inner {
background-color: #66ccff;
}
.hexagon3 .hexagon-inner {
background-color: #ff6666;
}
.hexagon4 .hexagon-inner {
background-color: #99cc33;
}
.hexagon5 .hexagon-inner {
background-color: #ffcc66;
}
.hex-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
```
在这个例子中,我们使用了 `float` 属性和百分比宽度来实现菜单项的自适应布局。我们还使用了 `:before` 和 `:after` 伪元素来创建六边形的边框。通过为每个菜单项设置不同的颜色,我们可以实现多彩的效果。最后,我们使用绝对定位和 `transform` 属性来将菜单项的标签居中对齐。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![mp4](https://img-home.csdnimg.cn/images/20210720083504.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)