将CSS的剪切路径六角形形状像蜂巢一样堆叠？

Question

尝试了剪切路径属性后，我终于使六角形起作用了，现在我想像六角形一样使六角形相互“堆叠”，我知道我可以用绝对定位来做到这一点，但这似乎不是最好的方法。

我想要类似的东西： https://i.imgur.com/1dUjUj3.jpg

HTML

<div class="poligon"></div>
<div class="poligon"></div>

CSS：

.poligon {
  display: inline-block;
  position: absolute; top:50px; right:50px;
  width: 300px;
  height: 300px;
  background: red;
  box-sizing: border-box;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}