Board Game Arena

Sorry if it's already answered but I can't find any mention to this. I'm trying to code a game that is played in an hexagon grid. I have followed the reversi tutorial but I can't find a way to build hexagonal blocks instead of square blocks. This is what I have achieved so far.

You can try to do it through css
https://codepen.io/sandeep/pen/wFeKj
and then you will have to manage the position of each element I would guess

tl;dr
I end up inscribing a circle in rectangle, but clip-path should be even better.

More detailed explanation follow...

There is a way to draw a hexagon with css borders:
https://jtauber.github.io/articles/css-hexagon.html
You can use before and after pseudoclasses instead of separate divs.

The problem with this approach is that a part of rectangle that is missing (making a rectangle look like hexagon) is still interactive. When you put two hexagons next to each other in a hex grid parts of them are overlapping and click on that overlapping part can be handled on both of hexagons.

You can make hexagons with svg polyline elements. You can have one svg element and put inside many polylines that make a hexgrid or you can have multiple svg elements, each with one polyline and arrange svg elements in hexgrid. I think the second approach is better because polyline elements have a read-only class attribute so it would be better to change css class to svg element itself or to div that wraps it.
There was some other problems which made me decide against using svg which I cannot remember right now.

At the end I inscribed a circle (div with border radius of 50%) into hexagon (in other words make invisible grid of circles above your board graphic file such that each circle is inscribed in one hexagon on graphic file). That way almost all of your hexagon is interactive and there is no overlap. Very simple and straightforward. The problem with this approach could be highlighting specific hexagon as you cannot simply made its border glow or change their background color, but you can show that circle or be more creative with highlighting by using images or other html elements on top.

The best approach should be using the clip-path css property, but I didn't try it. It is used in Kingdom builder implementation and works fine. It is not highly supported without prefixes, so remember to use them.

If there is a graphic board behind, you don't especially need to make hexagonal forms in HTML / CSS.
Just a square div container (for each cell / tile) well positioned on your board image (just use browser inspector on Terra Mystica for example).

But if you want to do nice hexagonal effects / style you will have some CSS work for sure

I haven't looked at other projects, but this is how I'm doing it:

.hex
{
position: absolute;
width: 80px;
height: 70px;
clip-path: polygon(20px 0px, 60px 0px, 80px 35px, 60px 70px, 20px 70px, 0px 35px);
transform: scale(0.76);
z-index: 10;
}

Have you tried SVG ?

This would give you a lot of freedom for drawing polygons.

Try that : http://brenna.github.io/csshexagon/
I use it for my wargame.

MikeIsHere wrote: ↑16 July 2020, 10:02 You can try to do it through css
https://codepen.io/sandeep/pen/wFeKj
and then you will have to manage the position of each element I would guess

Thank you very much, I finally did it!!

It needs a little fixes but it could work

Just know at the bottom of the article joezg posted you can now do this in one line
Also I agree with docthib, if the board is not dynamic you may be better off just setting a background image and then using zones to overlay your pieces

Castles of Burgundy may be a good example of hex grids

I am also using the clip-path thing but with % values so that my whole grid is responsive.
However, I am using the new display:grid property which is far better than position absolute in that case since it's basically a 2D grid.

If you any code, feel free to ask, you can also looks at this link but my final solution is far more simple :
https://ninjarockstar.dev/css-hex-grids/