Can I replicate this image using only html and css - specifically the shape and edges?
<p>I'd like to replicate the image below using only html and css if possible. I'd like to use this as a "badge" with changing icons and colors. A static image won't work for me:</p>

<p><a href="https://i.stack.imgur.com/Xi6Wx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xi6Wx.png" alt="enter image description here"></a></p>

<p>All seems doable, but I do not know how to replicate the actual shape of the badge itself (the green part). Is there a particular css directive I need to look into to achieve this?</p>

<p>EDIT: Appears a "Duplicate Question" concern was raised. Please note the linked to question does NOT include an image or text in the center of the hexagon, this one does. This adds a bit of complexity to the problem, and thus the new question. Based on the answers in this question, I was able to formulate a better google search and came across a codepen that worked beautifully for me. I vote for re-opening the question.</p>