Css 使用边框、圆角和透明背景制作六边形

我想在CSS3中制作一个六边形，带有边框、圆角和透明背景，如下图所示：

我不能用圆角和边框做这个

我的代码在这里：

#六角圆{
位置：相对位置；
保证金：1em自动；
宽度：10em；
高度：17.32em；
边界半径：1em/.5em；
背景：红色；
转变：不透明度。5s；
光标：指针；
}
#六角圆：前{
位置：绝对位置；
宽度：继承；
身高：继承；
边界半径：继承；
背景：继承；
内容：''；
-webkit变换：旋转（60度）；/*铬合金、Opera 15+、Safari 3.1+*/
-ms变换：旋转（60度）；/*IE 9*/
变换：旋转（60度）；/*Firefox 16+，IE 10+，Opera*/
}
#六角圆：后{
位置：绝对位置；
宽度：继承；
身高：继承；
边界半径：继承；
背景：继承；
内容：''；
-webkit变换：旋转（-60度）；/*铬合金、Opera 15+、Safari 3.1+*/
-ms变换：旋转（-60度）；/*IE 9*/
变换：旋转（-60度）；/*Firefox 16+，IE 10+，Opera*/
}

---

带圆角的六边形是需要创建的复杂形状，我通常建议使用SVG来创建它们。对透明背景的需求使得它更适合SVG。使用SVG，您可以更好地控制形状、曲线等，并且不必向标记中添加大量额外（不必要）的元素

使用SVG创建此形状所需的只是使用单个

path

元素以及一些

L

（行）和

a

（弧）命令。

L

（line）命令基本上从点1到点2绘制一条直线，而

a

（arc）命令绘制指定半径的圆弧（紧跟在

a

命令之后的前两个值）

您可以在中阅读有关SVG

path

元素及其命令的更多信息

svg{
高度：200px；
宽度：240px；
}
路径{
行程：777；
填充：无；
}
身体{
背景：黑色；
}

你在谷歌上搜索过

在css中制作带边框和圆角的六边形吗？

？Tnx引起注意…我尝试过，但没有帮助..如何设置边框：。。。。。。我的主要问题是为此设置边框…设置实心边框不是个好主意，，！我找到了一个我想要的东西的样本——我想要同样的东西：@miladhp:你形状的内部是透明的吗（或者）它会有一个彩色/图像作为填充物吗？@Harry它是透明的。。我想在其中添加一个文本…非常感谢Harry…svg是实现这一点的最佳方法…它是实现这一点的最简单和最好的方法。。