When I launched the site, the intent was to continually build on and improve the site. My personal website is sort of a playground and test-bed for trying new things. This was spurred on and confirmed by a friend in my last post. If you haven’t read about Rough Launching, head back and check it out.
One of the things I hate is how the hexagon avatar at the top of the page was a simple JPG. It’s not very forward thinking. What’s worse is that it’s a relative simple shape that can be replicated with web technologies. I’ve given a few different thoughts to this, and simplest implementation was to utilize SVG clip paths. The problem is that SVG clip paths are very limited in their support.
I decided to focus my efforts on working this out first with simple CSS shapes (i.e. triangles). Originally I wanted to try and come up with a way of using only an image, and maybe a single wrapper.
Unfortunately, I failed. Since you only have 2 CSS :pseudo elements (:before and :after), I was only able to replicate 2 triangles. The problem? I needed 4 to recreate the full hexagon shape. You start with a square, and insert 4 triangles into each corner to achieve the appearance of a hexagon.
Need help, advice or a speaker for your event? I’d love to connect and help you build novel solutions with design.
