Css 具有半透明背景和边框的六边形

我已经废弃了一些六边形

div

的代码，它运行得非常好。问题是现在我需要一个半透明背景，但是：after和：before标记重叠，这会导致透明度不一致

.hexagon{
位置：相对位置；
宽度：290px；
高度：173.21px；
利润率：86.60px0；
左边框：实心5px#333；
右边框：实心5px#333；
背景色：rgb（102204,34,0.7）；
}
.hexagon:之前，
.六边形：之后{
框大小：边框框；
内容：“；
位置：绝对位置；
z指数：1；
宽度：212.13px；
高度：212.13px；
-webkit变换：scaleY（0.5774）旋转（-45度）；
-ms变换：scaleY（0.5774）旋转（-45度）；
变换：scaleY（0.5774）旋转（-45度）；
背景色：rgb（102204,34,0.7）；
左：38.9340px；
}
.hexagon:以前{
顶部：-106.0660px；
边框顶部：实心7.0711px#333333；
右边框：实心7.0711px#333333；
}
.六边形：之后{
底部：-106.0660px；
边框底部：实心7.0711px#333333；
左边框：实心7.0711px#333333；
}

1.
2.

您可以使用渐变将伪元素的背景色修改为仅为其一半的颜色：

.hexagon{
位置：相对位置；
宽度：290px；
高度：173.21px；
利润率：86.60px0；
左边框：实心5px#333；
右边框：实心5px#333；
背景色：rgb（102204,34,0.7）；
}
.hexagon:之前，
.六边形：之后{
框大小：边框框；
内容：“；
位置：绝对位置；
z指数：1；
宽度：212.13px；
高度：212.13px；
-webkit变换：scaleY（0.5774）旋转（-45度）；
-ms变换：scaleY（0.5774）旋转（-45度）；
变换：scaleY（0.5774）旋转（-45度）；
左：38.9340px；
}
.hexagon:以前{
顶部：-106.0660px；
边框顶部：实心7.0711px#333333；
右边框：实心7.0711px#333333；
背景：线性梯度（左下角，rgb（102204,34,0.7）48%，透明48%）；
}
.六边形：之后{
底部：-106.0660px；
边框底部：实心7.0711px#333333；
左边框：实心7.0711px#333333；
背景：线性梯度（右上角，rgb（102204,34,0.7）48%，透明49%）；
}

1.
2.

考虑到您似乎只需要一个六边形，您希望给它一个边框和半透明背景，我建议使用内联svg

就这么简单：

svg{显示：块；宽度：30%；边距：0自动；}
正文{背景：url（'https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'）；背景位置：中间；背景大小：封面；}

再包含两个容器元素，并将伪元素放入其中，这样您就可以使用overflow:hidden来切断可能重叠的部分…？等等，这里没有什么十六进制问题和web tiki？在HTML中制作类似形状的最佳方法是使用SVG。我知道它不支持HTML和CSS，但它在新浏览器中工作得很好。哈哈，不错。这太棒了，而且帮助很大。我对它的一个问题是，它不是像素完美的，但现在它工作得很好。谢谢@TutuKaeen i还添加了一个SVG解决方案；）我需要很多，但我也会检查：）@TutuKaeen如果你需要在网格中制作很多六边形，我建议你研究一下这段代码，这不是我的意思，但这是我需要在一周左右的时间内解决的问题！这真的很有帮助@TutuKaeen很高兴它能帮上忙，这就是它的用途；）