Diamond menu items using CSS and SVG

Question

I want to create the code below in HTML and CSS

What i have done so far:

I did this using:

• links
• SVG as background
• Absolute position and translation (x, y) in CSS.

Please check fiddle for direct link.

Problems in my design:

• Each element is actually a rectangle, if you notice the selected rectangle in red, this is the selection area, so if you hover over the left corner m2, it will select m3.
• I want to change the background color of the SVG background on hover, how to achieve this?
• Is there an ideal way to improve this concept? even if we used JS to place elements.

Click here to view the SVG configuration itself.

CSS code for elements:

.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

So I would do this to preserve the borders of the shapes based on the Diamond Response Grid (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 paste content into shapes, you can “disable” it with transform: rotate(45deg)

Answer 2

The direct answer would be to use the poly SVG attribute

That is, you do not rely on CSS to rotate it.

The svg element after drawing is not processed after css changes appearance.

Drawing a diamond shape in poly is your best option to avoid a bounding box.

 <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 created shows that you are not editing the SVG background.

If you want the SVG background to change, you can add an attribute like I lined up, not edited in CSS.

For my version of working with the hover event, for example, you will need an identifier for each of the svg elements, and then :hover for each of them or javascript .. but this is just an option. Other answers look more applicable.

My answer only makes drawing easier on SVG.

Answer 3

Did css try to rotate to constrain the rectangle. In any case, you can use SVG as a background.

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

You need to rotate the links themselves. Right now, you are not spinning anything, you are simply displaying images with the drawers turned. Instead, make the background image intact and rotate it with CSS.

For instance:

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