7

This is not duplicate of any please help me

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

I want to create it dynamically with CSS , so how to do that?

whenever any new entry added to design that adjust automatically.

I have tried hard to search and i got some help for circle shape at here

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

same something I want with hexagon

enter image description here

Community
  • 1
  • 1
anytime
  • 409
  • 3
  • 7
  • 14
  • I'm not sure exactly how you want the design to adjust. Perhaps a sequence of pictures with numbered hexagons could be of assistance. (ex: pic1 has 3 hexagons, pic2 has 4 hexagons, pic3 has 10 hexagons) – Tibos Sep 25 '13 at 12:51
  • This is already answered here: http://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3 – Stuart Sep 25 '13 at 12:53
  • @Stuart yes i checked that but i want in different direction as you can see in my question's image – anytime Sep 25 '13 at 13:02
  • This question features a responsive grid of hexagons in the direction you need : http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons-with-img-tag – web-tiki Nov 26 '14 at 17:01

3 Answers3

2

Go through this demo which I've 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>
Daniel Kmak
  • 18,164
  • 7
  • 66
  • 89
Hari
  • 88
  • 9
  • thanks hari , here if i will add another two or three shapes then need to create css for those all ? – anytime Sep 26 '13 at 12:37
  • You can add Jquery/Javascript to populate this logic dynamically. So this javascript will do the layout manipulation dynamically. So basically it will act like a plugin. So no need of writing such big css code for doing so(suppose your layout contains 1000 hexagons, it will be 1000 different CSS). – Hari Sep 26 '13 at 14:23
  • exactly , i want same-things here, if you can help me will appreciate – anytime Sep 27 '13 at 05:20
  • up-voted your answer but if possible please try to make it dynamic – anytime Sep 27 '13 at 12:17
0

There is a great tutorial here on creating hexagonal shapes with CSS. Check out the step-by step guide at the start.

Create Hexagon shapes with pure CSS3

Also see this examples on CSSTricks. You'll get an idea of how to approach these kind of problems.

Shapes of CSS

Hope that helps! :)

maxxon15
  • 1,559
  • 4
  • 22
  • 35
0

Have a look at this CSS hexagon tutorial which describes how to create hexagon shapes AND be able to resize them using calc().

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

KennyV
  • 832
  • 1
  • 9
  • 18