Html 向六边形类添加辉光效果

我目前正试图在使用CSS类创建的六边形周围添加统一的光晕效果，但由于六边形的绘制方式，光晕效果最终会出现奇怪的中断，我似乎无法修复

.hexagon{
位置：相对位置；
边界半径：5px；
高度：125px；
宽度：75px；
利润率：50像素；
框大小：边框框；
边框：5px实心透明；
边框顶部颜色：黑色；
边框底色：黑色；
显示：内联块；
}
.hexagon:之前，.hexagon:之后{
内容：“；
边界：继承；
位置：绝对位置；
顶部：-5px；
左：-5px；
背景：继承；
边界半径：继承；
身高：100%；
宽度：100%；
}
.hexagon:以前{
变换：旋转（60度）；
}
.六边形：之后{
变换：旋转（-60度）；
}
.hexagon:悬停，.hexagon:悬停：之前，.hexagon:悬停：之后{
盒影：0-10px2px-2pxRGBA（255,0,0.5），0-10px2px-2pxRGBA（255,0,0.5）；
}

---

您可以在元素内部添加更多填充，并调整边框半径。所有线将交叉，半径将固定形状：

.hexagon{
位置：相对位置；
边界半径：20px；
填充：40px；
高度：125px；
宽度：75px；
利润率：50像素；
框大小：边框框；
边框：5px实心透明；
边框顶部颜色：黑色；
边框底色：黑色；
显示：内联块；
}
.hexagon:之前，
.六边形：之后{
内容：“；
边界：继承；
位置：绝对位置；
顶部：-5px；
左：-5px；
背景：继承；
边界半径：继承；
身高：100%；
宽度：100%；
}
.hexagon:以前{
变换：旋转（60度）；
}
.六边形：之后{
变换：旋转（-60度）；
}
.hexagon:悬停，
.hexagon:悬停：在，
.hexagon:悬停：在{
盒影：0-10px2px-2pxRGBA（255,0,0,0.5），0-10px2px-2pxRGBA（255,0,0.5）；
}

---

目的是使六边形具有固定阴影，或者您希望固定此六边形，尤其是一般六边形。从我所看到的，用CSS类创建平底六边形要困难得多，尤其是当你想要像我这样的淘汰填充时。太棒了！有没有任何方法可以让这项工作没有角落重叠有一个更高的透明度比其余的辉光？（如果没有，那就不用担心了。我肯定能应付得来。）是的，我也在考虑这个更高的透明度。。。顺便说一下，你可以通过减少paddin和radius来控制它。您可以使用这些值，直到您使“高opcity”小于实际值为止