Html 将多个div合并并对齐为一个形状

我正在尝试使用CSS创建一个六边形。关于这一点已经有很多问题，但在我的具体情况下，我需要它由3个相同的形状，不同的颜色组成

有两个具体要求：

六边形的总尺寸必须由单个值控制。在我的例子中，这是

.hexagon包装器

类的宽度

六边形形状必须在其父图形（

.hexagon wrapper

）内水平和垂直居中，并且该包装也必须在其父图形（最外面的div）内水平和垂直居中

您会注意到我的尝试存在一些问题：

构成六边形的三个部件没有紧密对齐， 当你改变的时候，整个形状开始分裂

.hexagon包装宽度

我使用了一些神奇的数字来翻译各个片段，它们不能保证片段在调整大小后会粘在一起，也不能保证元素在水平和垂直方向上完全居中

有没有一个更简单的方法，或者一些我遗漏的简单数学？基本上，我该如何将各个部分保持在一起，以及如何确保所有部分都居中

我曾考虑创建一个3D立方体，并使用<代码> Trave3D/COD>来确保所有东西都粘在一起，但我不想使用这种方法，因为在使用<代码>转换3D 时，我有很多反走样问题，并且想要避免完全的

。

.hexagon包装器{
显示器：flex；
位置：相对位置；
背景颜色：绿色；
宽度：40%；
身高：100%；
保证金：自动；
}
.六边形零件红色{
位置：相对位置；
宽度：27.85714285714286%；
填充：0 0 32.16760145166612%0；
变换：平移（112%，-50%）旋转（-60度）倾斜（30度）；
背景：红色；
保证金：自动；
}
.六角零件黄色{
位置：相对位置；
宽度：27.85714285714286%；
填充：0 0 32.16760145166612%0；
变换：平移（-49%，25%）旋转（0度）倾斜（30度）；
背景：黄色；
保证金：自动；
}
.六角零件蓝色{
位置：相对位置；
宽度：27.85714285714286%；
填充：0 0 32.16760145166612%0；
变换：平移（-69%，25.1%）旋转（60度）倾斜（30度）；
背景：蓝色；
保证金：自动；
}

---

这里有一个更简单的想法，您不需要任何复杂的计算和大量的转换：

.hexagon包装器{
位置：相对位置；
背景颜色：绿色；
宽度：40%；
保证金：自动；
显示器：flex；
证明内容：中心；
}
.六边形零件红色，
.六角部分黄色，
.六角零件蓝色{
宽度：30%；
显示：内联flex；
}
.六角体部分红色：之前，
.六角零件黄色：之前，
.六角零件蓝色：之前{
内容：“；
填充顶部：115.47%；/*100/cos（30度）*/
}
.六边形零件红色{
位置：绝对位置；
前-50%；
身高：100%；
宽度：60%；
背景：红色；
剪辑路径：多边形（0 50%，50%0，100%50%，50%100%）；
}
.六角零件黄色{
变换：歪斜（30度）；
变换原点：左；
背景：黄色；
}
.六角零件蓝色{
变换：歪斜（-30度）；
变换原点：右；
背景：蓝色；
}
身体{
保证金：0；
显示器：flex；
高度：100vh；
}

---

我必须删除

剪辑路径

并使用变换，这样边框之类的东西才能正常工作，但除此之外效果很好。谢谢