Diamond menu items using CSS and SVG - css

Question

I want to code the below design in HTML&CSS
What I made so far is:
I made it using:
a links
SVG as background
Absolute position and translate(x,y) property in CSS.
Please check this fiddle for the live link
The issues in my design are:
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.
I want to change
the background color of the SVG background when hover, how to
achieve that?
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,

Answer 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">
</div>
To insert content in the shapes, you can "unrotate" it with transform: rotate(45deg)

Answer 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);

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

Answer 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;
}
<span>m1</span>