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

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

m1