1

Already tried this one - Hexagon shape with a border/outline

But can't figure out to make it transparent. How can I create a hexagon that's transparent and outlined with white border? I'm trying to fiddle with it, but it does not seem to be possible. I would like to avoid using images.

Community
  • 1
  • 1
newbie_007
  • 59
  • 2
  • 9
  • also, this can be of help, http://stackoverflow.com/questions/17896791/hexagon-shape-with-css3 – Julien Spronck Apr 03 '15 at 16:45
  • possible duplicate of [CSS3 hexagon shape with a border/outline](http://stackoverflow.com/questions/19418486/css3-hexagon-shape-with-a-border-outline) – Manly Apr 03 '15 at 16:47
  • Already tried these codes but can't figure out. How to remove bg and put white border ? – newbie_007 Apr 03 '15 at 16:50

2 Answers2

2

If a SVG is an option, this works:

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
0

You can use rgba to set a color with transparency. Here's a fiddle with a working version: https://jsfiddle.net/shaansingh/9wqkmvfu/3/.

You can set your own background, and then change the border color to white. I made it black for visibility sake.

Edit: It's not directly possible to achieve outline with CSS because of the pseudo elements. I would go with SVG or images in this case.

  • thanks man, but I don't want to give any background. I want to make it opaque/transparent? – newbie_007 Apr 03 '15 at 17:13
  • 1
    What do you mean? Opaque is different from transparent. –  Apr 03 '15 at 17:15
  • sorry my bad. I want it to appear transparent :) like this - http://www.awesomescreenshot.com/image/25359/8fdedd41812b7e66b703ec8caf77dfb9 – newbie_007 Apr 03 '15 at 17:22