Diamond menu items using CSS and SVG

Question

I want to code the below design in HTML&CSS

What I made so far is:

Answer 1

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 2

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>

Answer 3

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 4

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)