Streaming live at 10am (PST)

Rounded hexagon DIVs with 2 borders


#1

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!


#2

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:

Hexagons%20Webflow%20Shaun%20Draws
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: https://starbugstone.eu/2017/08/30/who-said-that-hexagons-with-borders-were-hard-in-web-dev/

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 :grin:


#3

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