我想用 HTML 和 CSS 编写以下设计
到目前为止我所做的是:
我使用:
- 链接
- SVG 作为背景
- CSS 中的绝对位置和 translate(x,y) 属性。
请检查这个fiddle用于实时链接
我设计中的问题是:
- 每个元素实际上都是一个矩形,如果您注意到突出显示的 红色矩形,这是选区,所以如果你悬停 在 m2 的左上角,它将选择 m3。
- 我想改变 悬停时SVG背景的背景颜色,如何 实现那个?
- 有没有一种理想的方法可以使这个概念变得更好? 即使我们使用 JS 来定位元素。
点击here查看 SVG 形状本身。
元素的 CSS 代码:
.menu #m1 {
right: 100px;
transform: translate(-140px, -160px);
}
.menu #m2 {
right: 295px;
transform: translate(-25px, -80px);
}
.menu #m3 {
right: 400px;
}
.menu #m4 {
right: -60px;
transform: translate(-140px, -160px);
}
.menu #m5 {
right: 140px;
transform: translate(-20px, -80px);
}
.menu #m6 {
right: 240px;
}
.menu #m7 {
right: -95px;
transform: translate(-15px, -160px);
}
.menu #m8 {
right: 0px;
transform: translate(0, -80px);
}
谢谢,
最佳答案
这就是我如何根据 Responsive grid of diamonds 保持形状边界的方法(不需要 JS 或 svg):
.wrap{
width:50%;
margin-left:13%;
transform-origin:60% 0;
transform: rotate(-45deg);
}
.wrap > a{
float:left;
width:19%;
padding-bottom:19%;
margin:0.5%;
background:teal;
}
.wrap > a:hover{
background:gold;
}
.wrap > a:nth-child(4){
clear:left;
margin-left:20.5%;
}
.wrap > a:nth-child(7){
clear:left;
margin-left:60.5%;
}
<div class="wrap">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
要在形状中插入内容,您可以使用transform: rotate(45deg)
关于css - 使用 CSS 和 SVG 的菱形菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26553694/