使用CSS和SVG的菱形菜单项 [英] Diamond menu items using CSS and SVG

问题描述

我想在HTML和CSS中编写以下设计

I want to code the below design in HTML&CSS

到目前为止，我做的是：

What I made so far is:

我使用：

1. 一个链接


2. SVG作为背景


3. 绝对位置和翻译x，y）属性。

请检查此 fiddle for the live link

Please check this fiddle for the live link

我的设计中的问题是：

1. 每个项目实际上是一个矩形，如果你注意到红色突出显示
   矩形，这是选择的区域，所以如果你悬停
   在m2的左上角，它将选择m3。


2. 我想更改
   SVG背景的背景颜色，当悬停时，如何实现
   ？


3. 有一个理想的方法使这个概念更好？

点击此处查看SVG形状本身。

Click here to view the SVG shape itself.

：

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

感谢，

推荐答案

这是我将如何保持形状的边界基于响应网格的钻石（不需要JS或svg）：

This is how I would do it to keep the boundaries of the shapes based on Responsive grid of diamonds (no JS or svg needed):

DEMO

DEMO

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

To insert content in the shapes, you can "unrotate" it with transform: rotate(45deg)

这篇关于使用CSS和SVG的菱形菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！