Html 如何在剪辑路径形状周围创建边框？

我正在尝试创建六边形按钮，它有一个透明的背景和白色的1px实心边框，围绕着我用clip path创建的六边形。但是，当我应用边框时，它的一部分将被切断。我如何才能实现这种外观

这是我的密码：

.project按钮div{
位置：相对位置；
显示：内联块；
填充：1rem；
保证金：0 1rem 1rem 1rem；
颜色：#d9d9d9；
字号：1rem；
字号：700；
边框：1px纯白；
-webkit剪辑路径：多边形（50%0%、100%25%、100%75%、50%100%、0%75%、0%25%）；
剪辑路径：多边形（50%0%、100%25%、100%75%、50%100%、0%75%、0%25%）；
背景重复：无重复；
过渡：背景尺寸.5s，颜色.5s；
}
.到顶端{
背景位置：50%100%；
背景大小：100%0%；
}
.project按钮div：悬停{
背景大小：100%100%；
背景图像：线性渐变（白色、白色）；
颜色：#51d0de；
}

---

这就是我目前得到的，
我使用过filter:drop-shadow（）

对于透明背景，可以使用与父级相同的颜色

.hexagon{
背景：白色；/*给颜色很重要*/
填充：40px；
宽度：20%；
文本对齐：居中；
剪辑路径：多边形（50%0%、100%25%、100%75%、50%100%、0%75%、0%25%）；
}
/*主代码*/
.集装箱{
滤镜：投影（0px 0px 1px黑色）；
}

按钮

考虑到这在IE中不起作用，我只使用背景图像。你需要多边形形状吗？好的，你能解释一下背景图像吗？是的，我需要多边形的形状！这很有效。谢谢