3

I found a great stackoverflow answer on how to create a hexagonal patten using CSS.

Generate repeating hexagonal pattern with CSS3

It's almost perfect, except i'd like to flip the hexagons the other way (ie. so the point is at the top). I've managed to do this fairly easily by swapping the main hex div width/height: (hexrow > div)... however i'm really struggling to re-align the background image on the other supporting divs. I've been trying to figure it out for a while now without much success.

Could anyone possibly post a jsFiddle that shows how it's done?

This is where i'm at currently: What i've tried

..and i believe this is what i need to amend: 

.hexrow > div > div:first-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* width of main + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 120% auto;
    bottom: 0;
    left: 0;
    z-index: 1;

    -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
    -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
    -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */
    -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
    transform:rotate(-60deg) translate(-150px, 0);

    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Safari and Chrome */
    -moz-transform-origin: 0 0; /* Firefox */
    -o-transform-origin: 0 0; /* Opera */
    transform-origin: 0 0;
}

Any help much appreciated.

Community
  • 1
  • 1
type25
  • 33
  • 5
  • Here is a similar question with hexagons with points at the top/bottom : [responsive grid of hexagons with the `` tag](http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons-with-img-tag) – web-tiki Nov 26 '14 at 16:29

2 Answers2

1

Use :nth-of-type(odd) and :nth-of-type(even) and set different margins for odd/ even hexagons on the same row.

Or you could do it in a much simpler manner, with less markup - check my answer at that question and this demo I just did. The idea is that you apply a series of transforms on the element (which has overflow: hidden) in order to get a rhombus with an acute angle of 60 degrees and then you undo all those transforms in reverse order for a pseudo-element or a child element if you wish (having the same height as the element itself, but only .866 of its width, because .866 is the ratio of the distance between two parallel sides of a hexagon and its big diagonal) on which you actually apply the background-image. So there's no chance of misalignment, because the background image is only applied on one element.

Basic HTML structure:

<div class='row'>
    <div class='hexagon'></div>
</div>
<div class='row'>
    <div class='hexagon content ribbon' data-content='This is a test!!! 
    9/10'></div><!--
    --><div class='hexagon content longtext' data-content='Some longer text here.
       Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>

Relevant CSS:

.row { margin: -8% 0%; text-align: center; }
.row:first-child { margin-top: 2.25%; }
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 -1.5%;
    padding: 16%;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before {
    display: block;
    position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    right: 6.7%; bottom: 0; left: 6.7%; top: 0; /* 6.7% = (100% -86.6%)/2 */
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg); /* 1.155 = 2/sqrt(3) */
    background-color: rgba(30,144,255,.56);
    background-size: cover;
    content: '';
}
.row:first-child .hexagon:first-child:before {
    background-image: url(img.jpg); 
} 
/* and so on, add background images for all hexagons */
Community
  • 1
  • 1
Ana
  • 35,599
  • 6
  • 80
  • 131
  • It's not that is the issue, it's the background-image. It needs to be aligned properly on each dev element. – type25 Jan 19 '13 at 16:46
  • I've edited my answer with another method to get hexagons and a demo. – Ana Jan 19 '13 at 16:49
  • That looks good, but what i missing, when i separate the css into another file the layout etc is there but the hexagon shape is lost.. any ideas? – type25 Jan 19 '13 at 17:01
  • Have you added the `-webkit-` and `-ms-` prefixes for the `transform`? I use -prefix-free http://leaverou.github.com/prefixfree/ on CodePen so that I only have to write the unprefixed version. – Ana Jan 19 '13 at 17:03
  • No, but it works fine if it's all bunged in one .html file? If i do put the -webkit- prefix in it does some other weird any wonderful stuff, like puts all the padding out – type25 Jan 19 '13 at 17:07
  • For the padding thing, you could try using non % values - like this http://codepen.io/thebabydino/pen/hscJI You could also try taking out all hexagons but the first one and see how that works. Basically, take out all non-essential stuff from the code to try to isolate the problem. – Ana Jan 19 '13 at 17:12
  • I think the bit i'm not totally understanding is why the same code works fine if it's the css is within the same .html file but as soon as you take it out it doesn't look the same? – type25 Jan 19 '13 at 17:21
  • Does this work http://codepen.io/thebabydino/pen/muysK with the CSS in a separate file from the HTML? Same thing about the prefixes, I didn't add them, but they're not needed anyway if you're testing in a current version of Firefox or Opera. – Ana Jan 19 '13 at 17:30
  • Sorted it... it was me being stupid, not reading your explanation about prefix-free properly. Thanks for all your help! – type25 Jan 19 '13 at 17:32
  • Hi @Ana, sorry to bother you, but do you know how i could potentially insert html between the main hexagon div, instead of using content:? I'd like to essentially create a div square between the hexagon and fill it with custom html. Any help much appreciated. – type25 Jan 21 '13 at 09:38
  • Between hexagons or inside hexagons? `content` puts stuff inside. To do this without `content`, just use a child element instead of a pseudo-element. Like this http://codepen.io/thebabydino/pen/wryAz – Ana Jan 21 '13 at 10:08
  • Thanks Ana, that's brilliant. – type25 Jan 21 '13 at 13:23
0

I used borders.

Codepen.io

<div id="hex"></div>

And

#hex {
  display: inline-block;
  position: relative;
  width: 190px;
  height: 220px;
  background: no-repeat url("http://placekitten.com/200/300") 50% 50%;
}

div:before {

  content: " "; 
  display: block; 
  border-top: 0px solid transparent;
  border-bottom: 55px solid transparent;
  order-left: 95px solid white;
  border-right: 95px solid white;
}

div:after {

  content: " "; 
  display: block; 
  border-left: 95px solid white;
  border-top: 55px solid transparent;
  border-right: 95px solid white;
  margin-top:110px
}
EricG
  • 3,788
  • 1
  • 23
  • 34