I am attempting to create hexagon shaped elements that will display an image provided by a third party app. Since the images are provided dynamically, I need to inject them into the markup. Ideally the format would look something like:
<div class="hexagon">
<!-- get the image and put it in the hexagon -->
<img src="foo"/>
</div>
I have found numerous tutorials on how to display hex shaped images using background styles in css, but no prescriptions for what I'm attempting here.
The closest I have come to solving this is using border shapes, but ran into issues of overlapping when trying to fit the hexagons into a honeycomb pattern. I am currently the the '60deg rotation' method, but still no dice :(
Check out my pen for reference, thanks!
