6

I want to code the below design in HTML&CSS

enter image description here

What I made so far is:

enter image description here

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,

web-tiki
  • 99,765
  • 32
  • 217
  • 249
shadeed9
  • 1,786
  • 5
  • 22
  • 29
  • are you in a position to group them into 1 svg ? Then attributes on the g elements for example you could add `fill="true"` (im thinking d3 btw) – Pogrindis Oct 24 '14 at 18:06
  • Grouping them into 1 svg will not work with the responsive design, right? what do you mean by g elements? and d3? – shadeed9 Oct 24 '14 at 18:07
  • it probably wont work responsive.. you can group elements into an SVG.. so each rectangle is `` within the svg.. with its own attributes.. and use a poly.. not a rectangle with rotation – Pogrindis Oct 24 '14 at 18:08
  • from your fiddle this is NOT SVG – Pogrindis Oct 24 '14 at 18:33

4 Answers4

7

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)

Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Thanks! Is there a way to make it responsive? – shadeed9 Oct 25 '14 at 18:30
  • @shadeed9 it is responsive, resize the width of the result window in the fiddle and you will see the size of the diamonds change accordingly. – web-tiki Oct 25 '14 at 18:50
  • What I mean is to rearrange the diamonds, in the mobile view it's size is too small and the content will not be readable. – shadeed9 Oct 25 '14 at 20:01
  • @shadeed9 yes, it is possible with media queries how should they rearage? – web-tiki Oct 26 '14 at 08:44
  • @shadeed9 I'm sorry, I won't have time to do this but it is possible using media queries. You could ask an new question with the code I provided and someone will shurely hepl you. – web-tiki Oct 28 '14 at 10:02
  • oh web-tiki and his menu's. Soon this will become a reposity too. – Persijn May 29 '16 at 16:20
0

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.

Pogrindis
  • 7,755
  • 5
  • 31
  • 44
  • I'm not rotating it, the svg shape is like the one you made. What I made in CSS is only translating it X and Y values. – shadeed9 Oct 24 '14 at 18:30
  • @shadeed9 can you show us the constructor of the svg please. Your fiddle doesnt show the at all.. – Pogrindis Oct 24 '14 at 18:31
  • 1
    Updated. Please check this link: https://dl.dropboxusercontent.com/u/35853519/rect.svg – shadeed9 Oct 24 '14 at 18:34
  • @shadeed9 thanks shadeed, you have two optinos then, update the SVG colour or rotate the html elements as suggested in other answers! :) – Pogrindis Oct 24 '14 at 18:37
0

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>
cforcloud
  • 589
  • 2
  • 8
0

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);
Don Rhummy
  • 24,730
  • 42
  • 175
  • 330