Html 如何对齐几何图形

我试着像下面这张图片一样对齐几何形状

我尝试使用position absolute，但没有成功，这是我尝试使用的代码

<div className={style.container}>
  <div className={style.hexagons}>
    <div>
      <Hexagon />
    </div>
    <Hexagon />
    <div className={style.teste}>
      <Hexagon />
    </div>
  </div>
</div>

屏幕上是这样的

---

如果您能帮助我，或者告诉我a是如何感激的，请将它们放在彼此之上，然后使用转换。以下是一个例子：

.box{
宽度：100px；/*调整此值以控制大小*/
利润率：80px自动0；
显示：网格；
}
.包厢部{
网格面积：1/1；/*彼此上方*/
剪辑路径：多边形（25%0%、75%0%、100%50%、75%100%、25%100%、0%50%）；
变换：旋转（var（--d））平移（-52%）；/*稍微大于50%以创建间隙*/
}
.box div：：之前{
内容：“；
填充顶部：86.6%；/*100%*cos（30）*/
显示：块；
}
.box div:n个子（1）{--d:0deg；}
.box div:n子（2）{--d:120度；}
.box div:n子（3）{--d:240度；}

非常感谢您的时间和回答，但我已经创建了形状，它是一个svg，我导入并放在屏幕上，我只想像第一张图片一样对齐，我不知道如何使用css网格或绝对位置。@Pedro您不需要重新创建形状。你需要遵循同样的逻辑。我从sractch创建了这个形状来说明这个技巧，因为它是一个六边形，所以它和你的一样。只要用你的袜子代替我的形状，谢谢，我会试试的

.container {
  height: 800px;
}

.hexagons {
  display: flex;
  position: absolute;
  width: 100%;
}

.teste {
  margin-top: 50px;
}