1

So i have a hexagonal image and when i do ng-repeat i want the result to be as follows.

hexa1

The width of the container has to be 448px and the images need to be responsive. This is what i have tried.

CodePen

HTML

<div class="hexagons">
    <img src="images/hexagon5.png" alt="">
    <img src="images/hexagon6.png" alt="">
    <img src="images/hexagon5.png" alt="">
    <img src="images/hexagon6.png" alt="">
</div>

CSS

.hexagons {
  max-width: 448px;
  height: 800px;
  position: relative;
}
.hexagons img:nth-child(even) {
  position: relative;
  top: -115px;
  left: 193px;
}
.hexagons img:nth-child(odd) {
  position: relative;
}

The result:

Result

Can someone please guide me through this.

3
  • 1
    csshexagon.com may come in handy :)
    – kolboc
    Oct 17, 2016 at 20:34
  • Can you provide a working example (not a screenshot...)?
    – Dekel
    Oct 17, 2016 at 20:37
  • @kolboc i am not looking for how to make a hexagon.
    – Kudos
    Oct 17, 2016 at 20:42

1 Answer 1

2

This can be achieved by simply offsetting each even elements by half the height of the hexagon, example:

HTML

<div class="hexagons">
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
</div>

CSS

.hexagons {
  width: 300px;
}

.hex {
  float: left;
  width: 150px;
  height: 100px;
}

.hex:nth-child(2n) { /* .hex:nth-child(even) works too! */
  position: relative;
  top: 50px; /* half of 100px */
}

Live example: http://codepen.io/veksen/pen/GjYKBJ

Your pen corrected: http://codepen.io/veksen/pen/QKkLJg?editors=1100
Note that since images are block elements, I had to set them as blocks, and float them. The container has to be wide enough to accomodate two images (which are 256px wide). The even hexagons also needed to be shifted to the left.

Updated for responsive: http://codepen.io/veksen/pen/XjxWJo?editors=1100
Play with the percentages a bit, but you get the idea!

4
  • Hi thx for reply. i want the container width to be 448px and the images to be responsive. If i understand correctly you can do width 100% and height: auto to achieve that but when i do that i brake the whole thing.
    – Kudos
    Oct 17, 2016 at 20:58
  • I'll update my answer, but make sure you update your question to reflect that requirement, nothing is quite the same when you work with responsive ;)
    – veksen
    Oct 17, 2016 at 21:05
  • Updated for responsiveness.
    – veksen
    Oct 17, 2016 at 21:13
  • If this answers your question, make sure you be a good SO citizen, upvote and accept it :)
    – veksen
    Oct 17, 2016 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.