Html 两个六边形的定心

我有两个六边形，一个是主背景，另一个是边框，但是里面的主六边形有点不合适

.hexagon{
位置：相对位置；
宽度：179.1px；
高度：103.40px；
利润率：51.70px0；
左边框：实心5px#c94400；
右边框：实心5px#c94400；
}
.hexagon:之前，
.六边形：之后{
内容：“；
位置：绝对位置；
z指数：1；
宽度：126.64px；
高度：126.64px；
-webkit变换：scaleY（0.5774）旋转（-45度）；
-ms变换：scaleY（0.5774）旋转（-45度）；
变换：scaleY（0.5774）旋转（-45度）；
背景色：继承；
左：21.2286px；
}
.hexagon:以前{
顶部：-63.3214px；
边框顶部：实心7.0711px#c94400；
右边框：实心7.0711px#c94400；
}
.六边形：之后{
底部：-63.3214px；
边框底部：实心7.0711px#c94400；
左边框：实心7.0711px#c94400；
}
.内六角{
位置：相对位置；
宽度：160px；
高度：92.38px；
背景色：rgba（42,42,42,0.66）；
利润率：46.19px0；
}
.内六角：之前，
.内六角：后{
内容：“；
位置：绝对位置；
宽度：0；
左边框：80px实心透明；
右边框：80px实心透明；
}
.内六角：在{
底部：100%；
边框底部：46.19px固体rgba（42,42,42,0.66）；
}
.内六角：后{
最高：100%；
宽度：0；
边框顶部：46.19px固体rgba（42,42,42,0.66）；
}
}

您可以使用“Flexbox”来表示水平和垂直中心。您可以在中学习。对于您的解决方案，请删除六边形内类的边距并添加

display: flex;
align-items: center;
justify-content: center;

六边形类。

3个六边形使用夹持路径-img上的img 我提供另一个解决方案

这是一个很好的技巧来实现这一点，你可以使用百分比或像素

.container{
高度：240px；
宽度：240px；
背景图片：url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop);
背景尺寸：封面；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.六边形{
变换：旋转（30度）；
/*高度：173.2px*/
/*宽度：200px*/
身高：69.28%；
宽度：80%；
位置：相对位置；
}
海克斯先生{
位置：绝对位置；
剪辑路径：多边形（25%0，75%0，100%50%，75%100%，25%100%，0.50%）；
}
.六边形1{
身高：100%；
宽度：100%；
背景色：rgb（201,68,0）；
}
.六边形2{
身高：92%；
宽度：92%；
最高：4%；
左：4%；
}
.复制背景{
变换：旋转（-30度）；
身高：124%；
宽度：124%；
位置：相对位置；
前-12%；
左-12%；
背景图片：url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop);
/*背景尺寸：320px*/
/*背景位置：-6px-21px*/
背景大小：146%；
背景位置：10%50%；
背景重复：无重复；
}
.六边形3{
身高：84%；
宽度：84%；
最高：8%；
左：8%；
背景色：rgba（35,35,35,0.7）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
字体大小：粗体；
}
.文本{
变换：旋转（-30度）；
}

沃尼亚

请将您的代码添加到问题本身，而不仅仅是小提琴的链接。在这里使用代码段功能。请阅读：