CSS clip-path hexagon border not rendering properly (shows only with background, not as outline) [duplicate]

You can use this scss-mixin to create a hexagon with a border. Creates a hexagon in any size or color.

HTML Markup:

<div class="hex-holder"> <div class="hex"></div> <div class="hex-content"></div> (<-- optional) </div>

1) simple method:

div.hex-holder{ @import hexagon($width, $color, $rotation, $border, $radius) }

where:

width = width of your hexagon color = border-color rotation = rotation border = width of border

radius = border-radius (rounds corners slightly)

@mixin($width: 140px $color: black, $rotation: 0, $border: 3px, $radius: 10px){ $height: $width * tan(60deg) - $border*2 - $radius/2; $naturaldiameter: $width + 2 * cos(60deg); position: relative; div.hex { transform: rotate($rotation + deg); width: $width; height: $height; border-radius: $radius; position: relative; @include content-box(); border-top: $border solid $color; border-bottom: $border solid $color; margin: auto; div.hex-content{ max-width: $height; position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; transform: rotate(-1*$rotation+deg); } } div.hex::after, div.hex::before{ content: ""; margin-top: $border * -1; transform: rotate(-60deg); display: block; position: absolute; border-top: $border solid $color; border-bottom: $border solid $color; width: $width; height: $height; border-radius: $radius; } div.hex::before{ transform: rotate(60deg); }}

2) advanced method: - this is better if your hexagon changes in size or color. it allows you to change only a portion of the properties (ex. hex_size when screen size changes)

div.hex-holder{ @include hex_basics(30); @include hex_color($bordercolor1, $backgroundcolor1); @include hex_size($width1, $borderwidth1, $borderradius1); &:hover{ @include hex_color($bordercolor2, $backgroundcolor2); } @media( query ){ @include hex_size($width2, $borderwidth2, $borderradius2); } } @mixin hex_basics($rotation: 0){ position: relative; div.hex{ transform: rotate($rotation + deg); position: relative; @include content-box(); margin: auto; border-top-style: solid; border-bottom-style: solid; } div.hex-content{ position: absolute; z-index: 2; border-radius: 40%; width: 100%; height: 100%; top: 0; display: block; } div.hex::after, div.hex::before{ content: ""; transform: rotate(-60deg); display: block; position: absolute; border-top-style: solid; border-bottom-style: solid; } div.hex::before{ transform: rotate(60deg); } } @mixin hex_size($width: 140px, $border-width: 3px, $radius: 10px){ $height: $width * tan(60deg) - $border-width *2 - $radius/2; $naturaldiameter: $width + 2 * cos(60deg); div.hex::after, div.hex::before, div.hex{ margin-top: $border-width * -1; border-top-width: $border-width; border-bottom-width: $border-width; width: $width; height: $height; border-radius: $radius; } } @mixin hex_color($border-color: black, $background-color: white){ div.hex::after, div.hex::before, div.hex{ border-top-color: $border-color; border-bottom-color: $border-color; background-color: $background-color; } }

note: div.hex-content may not be aligned property, you can set the top property to fix that.