在css中创建带边框的透明六边形

Question

已经尝试过这个 - Hexagon shape with a border/outline

但无法弄清楚它是否透明。 如何创建透明且带有白色边框的六边形？我试图摆弄它，但似乎不可能。 我想避免使用图片。

Answer 1

如果选择SVG，则可以：

body {
    background:#ccc;
}

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <polygon fill="none" points="276.1128234863281,134 213.05642700195312,243.2169189453125 86.94358825683594,243.2169189453125 23.887176513671875,134 86.94358825683594,24.78308868408203 213.05642700195312,24.78308868408203 276.1128234863281,134 " stroke="#fff" stroke-width="15" />
</svg>

Answer 2

您可以使用rgba设置透明度的颜色。这是一个工作版本的小提琴：https://jsfiddle.net/shaansingh/9wqkmvfu/3/。

您可以设置自己的背景，然后将边框颜色更改为白色。为了目击，我把它弄成了黑色。

编辑：由于伪元素，无法直接使用CSS实现大纲。在这种情况下，我会使用SVG或图像。