在CSS中創建帶有邊框的透明六邊形

Question

已經嘗試過這個- 具有邊框/輪廓的六角形

但是無法弄清楚它是否透明。 如何創建透明且帶有白色邊框的六邊形？ 我正在嘗試擺弄它，但似乎不可能。 我想避免使用圖像。

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或圖像。