Diamond menu items using CSS and SVG

问题:

I want to code the below design in HTML&CSS

What I made so far is:

I made it using:

1. a links
2. SVG as background
3. Absolute position and translate(x,y) property in CSS.

Please check this fiddle for the live link

The issues in my design are:

1. Each item is actually a rectangle, if you notice the highlighted rectangle in red, this is the area of the selection, so if you hover over the left corner of m2, it will select m3.
2. I want to change the background color of the SVG background when hover, how to achieve that?
3. Is there an ideal way to make this concept better? even if we used JS to position the elements.

Click here to view the SVG shape itself.

CSS code for the items:

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

Thanks,

回答1:

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

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

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

回答2:

You need to rotate the links themselves. Right now, you're not rotating anything, you're just showing images with rotated boxes. Instead, make the background image unrotated and rotate them with CSS.

For example:

-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);

回答3:

A direct answer would be to use the poly attribute of SVG

That was you are not relying on CSS to rotate it.

The svg element once drawn is not manipulated after the css changes the appearance.

Drawing a 'diamond' shape in poly is your best option to avoid the bounding rectangle..

<svg height="250" width="500">
  <polygon points="0,25, 25,0, 50,25, 25,50 " style="fill:black" />
</svg>

Basic example

JsFiddle

Update :

The code you have produced is shows it is not the SVG background you are editing..

If you want the SVG background to change you can add the attribute as i have lined up, not edited in CSS.

For my option to work on a hover event for example, you will need an id on each of the svg elements and then :hover on each of those, or javascript.. but its just an option. Other answers look to be more applicable.

My answer only facilitates the drawing onto the SVG.

回答4:

Did you try css rotate to restrict the rectangle. You could use SVG anyway as the background now.

.m-item {
color: white;
text-decoration: none;
text-transform: uppercase;
border: 2px solid #000;
background-color: black;
padding: 50px;
position: absolute;
transform: rotate(45deg) translate(25px);
}
.m-item span {
position: absolute;
transform: rotate(-45deg) translate(0, -14px);
}
.m-item:hover {
background-color: #AA5;
}

<a href="#" class="m-item"><span>m1</span></a>