All geek questions in one place

Square Design HTML Problems

Possible duplicate:
Create a repeating hexagonal pattern with CSS3

I want to make a layout like in the image

enter image description here

But I can not do this in the basic html.

Please help me with this. (Since this is a hexagon, and these images are not square, so I am a problem)

You can download the device hexagon from : Click here:

+4
source share
3 answers

You can make it much easier:

demonstration

You use a structure such as:

<div class='box-wrapper'> <div class='row'> <div class='hexagon'><a href='#'></a></div> <!--and so on, more hexagons--> </div> <!--and so on, more rows--> </div>

And CSS is simple:

 .box-wrapper { margin: 5em 1em 1em; border: solid 1px silver; padding: 3.2em 0; } .row { margin: -1.6em 0; text-align: center; } .hexagon { display: inline-block; overflow: hidden; width: 8em; height: 8em; transform: rotate(-30deg) skewX(30deg) scaleY(.866); } .hexagon a { display: block; height: 100%; transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866); background: gainsboro; }
+8
source

You can do this using the HTML Map Tag very easily and precisely if you use Dream Weaver it will be a piece of cake, so you need the actual picture of the hexagons and start drawing them in DW or something else. You have a WYSIWYG editor : Map area area

Although this can be achieved with pure css / html, by managing div fields.

0
source 
 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .odd, .even{ background:url('unite.png'); height:202px; margin-bottom:-47px; } .odd{ margin-left:88px; } </style> </head> <body> <div class="odd"></div> <div class="even"></div> <div class="odd"></div> <div class="even"></div> </body>

If this is what you want, I would be happy .. :)

Last image change, but will give a problem for links if you are not using the HTML Map area

 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .odd{ height:202px; padding-left:88px; } .even{ height:202px; margin-top:-47px; } </style> </head> <body> <div class="odd"> <img src="unite.png" /> <img src="unite.png" /> <img src="unite.png" /> <img src="unite.png" /> </div> <div class="even"> <img src="unite.png" /> <img src="unite.png" /> <img src="unite.png" /> <img src="unite.png" /> <img src="unite.png" /> </div> </body>

0
source

Source: https://habr.com/ru/post/1441965/

More articles:


All Articles