Html 如何使css中的六边形拉长

我已经阅读了答案，但我正在使用下面的代码来制作六边形。虽然六边形反应灵敏，但我无法使其拉长。我不太喜欢使用边界解决方案，我希望添加类来覆盖现有样式

.socialIcon{
宽度：100px；
高度：100px；
颜色：黑色；
过渡：颜色400ms，易于调节；
}
.颜色{
背景色：#1ae694；
过渡：背景色500ms，易于调节；
}
.六边形包装{
文本对齐：居中；
位置：相对位置；
显示：内联块；
利润率：50像素；
}
.iconContainer{
位置：绝对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
排名：0；
底部：0；
左：0；
右：0；
}
.六边形{
身高：100%；
宽度：计算值（100%*0.57735）；
显示：内联块；
}
.hexagon:以前{
位置：绝对位置；
排名：0；
右：计算（（100%/2）-（100%*0.57735）/2）；
背景色：继承；
身高：继承；
宽度：继承；
内容：“；
变换：旋转（60度）；
}
.六边形：之后{
位置：绝对位置；
排名：0；
右：计算（（100%/2）-（100%*0.57735）/2）；
背景色：继承；
身高：继承；
宽度：继承；
内容：“；
变换：旋转（-60度）；
}

---

更新答案

我建议您从这个角度使用Temani的方法。
它使用多个

linear gradient

s来创建背景，并且在HTML中需要较少的元素：

.socialIcon{
颜色：黑色；
过渡：颜色400ms，易于调节；
}
.颜色{
--颜色：#1ae694；
背景色：var（--color）；
}
.六边形包装{
文本对齐：居中；
位置：相对位置；
显示：内联块；
}
.六边形{
填充：10px 60px；
显示：内联块；
背景：
线性渐变（至右上角，var（--颜色）49.5%，透明50.5%）右上角/20px 50%，
线性渐变（至右下角，var（--颜色）49.5%，透明50.5%）右下角/20px 50%，
线性渐变（至左下角，var（--颜色）49.5%，透明50.5%）左下角/20px 50%，
线性渐变（至左上角，var（--颜色）49.5%，透明50.5%）左上角/20px 50%，
线性梯度（var（--颜色），var（--颜色））中心/计算（100%-40px）100%；
背景重复：无重复；
}
/*评论后添加*/
.hexagon:悬停{
--颜色：#aae；
}

---

更新答案

我建议您从这个角度使用Temani的方法。
它使用多个

linear gradient

s来创建背景，并且在HTML中需要较少的元素：

.socialIcon{
颜色：黑色；
过渡：颜色400ms，易于调节；
}
.颜色{
--颜色：#1ae694；
背景色：var（--color）；
}
.六边形包装{
文本对齐：居中；
位置：相对位置；
显示：内联块；
}
.六边形{
填充：10px 60px；
显示：内联块；
背景：
线性渐变（至右上角，var（--颜色）49.5%，透明50.5%）右上角/20px 50%，
线性渐变（至右下角，var（--颜色）49.5%，透明50.5%）右下角/20px 50%，
线性渐变（至左下角，var（--颜色）49.5%，透明50.5%）左下角/20px 50%，
线性渐变（至左上角，var（--颜色）49.5%，透明50.5%）左上角/20px 50%，
线性梯度（var（--颜色），var（--颜色））中心/计算（100%-40px）100%；
背景重复：无重复；
}
/*评论后添加*/
.hexagon:悬停{
--颜色：#aae；
}

---

创建“可展开”六边形的最简单方法是在容器的两端各放一个六边形，并使中心颜色相同。这里是一个执行，你可以给负水平边距的中心文本，以收紧间距，如果必要的话。我还清理了hexagon生成代码，使其更具动态性-如果更改

.hexagon

元素的宽度，其他所有内容都会随之调整大小

.color{
背景色：#1ae694；
过渡：背景色500ms，易于调节；
}
.文本内容{
位置：相对位置；
z指数：3；
显示器：flex；
}
.文本内容跨度{
保证金：自动；
字号：18px；
}
.可扩展十六进制{
显示器：flex；
弯曲方向：行；
证明内容：中心；
字号：0；
}
.六边形{
宽度：80px；
}
.内六角{
宽度：100%；
保证金：自动；
垫底：173%；
显示：内联块；
位置：相对位置；
}
.内六角：前，.内六角：后{
位置：绝对位置；
排名：0；
左：0；
变换原点：中心；
背景色：继承；
身高：100%；
宽度：100%；
内容：“；
}
.内六角：在{
变换：旋转（60度）；
}
.内六角：后{
变换：旋转（-60度）；
}

我很满意

创建“可展开”六边形的最简单方法是在容器的两端各放一个六边形，并使中心颜色相同。这里是一个执行，你可以给负水平边距的中心文本，以收紧间距，如果必要的话。我还清理了hexagon生成代码，使其更具动态性-如果更改

.hexagon

元素的宽度，其他所有内容都会随之调整大小

.color{
背景色：#1ae694；
过渡：背景色500ms，易于调节；
}
.文本内容{
位置：相对位置；
z指数：3；
显示器：flex；
}
.文本内容跨度{
保证金：自动；
字号：18px；
}
.可扩展十六进制{
显示器：flex；
弯曲方向：行；
证明内容：中心；
字号：0；
}
.六边形{
宽度：80px；
}
.内六角{
宽度：100%；
保证金：自动；
垫底：173%；
显示：内联块；
位置：相对位置；
}
.内六角：前，.内六角：后{
位置：绝对位置；
排名：0；
左：0；
变换原点：中心；
背景色：inheri