Hi brains trust,
I have a site build that uses a lot of rounded hexagons, I was wondering if anyone has any tips to create these as per the below (with 2 borders).
Bonus points if you have an elegant solution to the staggered positioning also.
Thanks!
Getting the obvious out of the way, it would be quite easy to have the hexagons as square png masks with a transparent hexagonal shape knocked out of its center - like so:
Although I do recommend spending more than 2 minutes on it.
If you want to go the hardcore route, you could have 2 sets of 3 regular rectangles, overlayed un top of one another. Here’s a tutorial that deals with that: Who said that hexagons with borders were hard in web dev | StarbugStone's Dev Blog
Regarding the the staggered position - I’d suggest simply adding a subclass to every other topmost element, adding the needed margin when appropriate.
Btw, this is more a #help:design-help kind of question 
Thanks for the quick response @Moscangelo, I went for somewhere between the 2 in the end, using a transparent png frame with the image clipped into a hard edge hexagon behind, so I could still use it with any background. The rectangles route looks interesting but maybe it could get messy with so many elements.
Great input, apologies about the wrong section
