Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Barry Denson
Barry Denson
Courses Plus Student 13,188 Points

Create hexagon pattern in CSS?

I am trying to create the following:

https://drive.google.com/file/d/0B6brEk59fn7IaE40ck9WbXNlbFE/view?usp=sharing

I need to be able to click a hexagon and change its colour, and also to put some initials into each shape so it will have to be css and/or html.

I have the following CSS, but can't work out how to position them in the pattern or change the colours.

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}
#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;
}

Any suggestions?

Thanks Baz

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Barry,

The hexagon in your code is a different orientation from the screenshot, which one do you want?

Also, the screenshot shows that the hexagon's have a border and there's also 3 colors showing there.

Let us know if Christian's demo is what you were looking for or give us more details.

If you have to click to change the color then I don't know if you will be able to do this without some javascript.

Is there any reason you can't use background images for this? Or is this more of a see what's possible with css?

2 Answers

Christian Andersson
Christian Andersson
8,712 Points

Been working on this one for a bit. Hope this is what you were looking for:

http://codepen.io/anon/pen/GboDw

Barry Denson
PLUS
Barry Denson
Courses Plus Student 13,188 Points
Barry Denson
Barry Denson
Courses Plus Student 13,188 Points

Christian.. Thanks so much for that, it will be a great starting point to try and achieve the end product.

Jason... The image I supplied is where I am trying to get to. I'm trying to re-create a UK childrens Gameshow from the 80's called Blockbusters (not sure if they had it in the US), specifically the Gold Run final (see https://www.youtube.com/watch?v=p1FFBTp5ibU).

I don't really mind how I get there, but I guessed that CSS would be an easier route (was I wrong?). I had also worked out that some Javascript may be needed. In addition I need to be able overlay text on the hexagons.

Once again thanks for the answers, I'll have a crack at solving the problem myself, but any additional pointers would be greatly appreciated.

Baz