在项目周围创建六边形边框

Question

是否有可能在第一个span标签周围创建带有圆形边缘的六边形边框/形状，如下所示：

<li>
   <span class="hex-shape">1</span>
   <span>First item</span>
</li>

也许是带有边界半径或伪元素的..？

所以，类似这样-但边缘略圆：https://study.com/cimages/multimages/16/farehexpri0.png

感谢所有创意！