Dynamically create hexagon using css and js

Question

This is not a duplicate, please help me

I got the trick here http://jsfiddle.net/kizu/bhGn4/

I want to create it dynamically using CSS , so how do I do this?

whenever a new record is added to a construct that is automatically configured.

I tried very hard to do the search and I got some help for the circle shape here

How to create circles around a circle using css, javascript?

same thing i want with hexagon

Answer 1

Go through this demo that I created:

 .hexagon { width: 100px; height: 55px; background: red; position: absolute; } .hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } .hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; } .hex1 { top: 20px; left: 0px; } .hex2 { top: 20px; left: 110px; } .hex3 { top: 20px; left: 220px; } .hex4 { top: 110px; left: 55px; } .hex5 { top: 110px; left: 165px; } .hex6 { top: 110px; left: 275px; } 

 <div style="position:absolute; top:30px"> <div class="hexagon hex1"></div> <div class="hexagon hex2"></div> <div class="hexagon hex3"></div> <div class="hexagon hex4"></div> <div class="hexagon hex5"></div> <div class="hexagon hex6"></div> </div> 

Answer 2

There's a great tutorial on creating hexagonal shapes with CSS. Check out the walkthrough at the beginning.

Create hexagon shapes with pure CSS3

Also see examples in CSSTricks. You will get an idea of ​​how to approach such problems.

CSS Forms

Hope this helps! :)

Answer 3

Check out this CSS hexagon tutorial for how to create hexagon shapes and be able to resize them using the calc () function.

All you need is one value for height, and the rest is for you. It also uses only one class.