CODEWITHSUNDEEP
htmlcss
newbie_007
newbie_007

Reputation: 59

Create a transparent hexagon with border in css

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.

Upvotes: 1

Views: 3657

Answers (2)

user3857868
user3857868

Reputation:

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.

Upvotes: 0

j08691
j08691

Reputation: 207900

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>

Upvotes: 2

Related Questions