In this post you can find two Code Pen examples of how to create a scalable CSS hexagon shape. I have included the examples in LESS.js and SCSS formats, but both are very similar.

This technique is a simple method of replicating the basic hexagon from csshexagon.com without having to use the generator.

The hexagon shape and size are controlled by 2 simple variables.

$hex-size: 180px;
$hex-height: $hex-size / sqrt(3);

This allows you to change the entire shape size by simply editing the value of the $hex-size variable.

Additionally a third variable is used to specify the hexagon colour.

$hex-color: #C6538C;

Try playing with the examples below. With a little modification a dynamic text label can even be added (see final example).

SCSS

$hex-size: 180px;
$hex-height: $hex-size / sqrt(3);
$hex-color: #C6538C;

.hexagon { position: relative; width: $hex-size; height: $hex-height; background-color: $hex-color; margin: $hex-height/2; }

.hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: $hex-size/2 solid transparent; border-right: $hex-size/2 solid transparent; }

.hexagon:before { bottom: 100%; border-bottom: $hex-height/2 solid $hex-color; }

.hexagon:after { top: 100%; width: 0; border-top: $hex-height/2 solid $hex-color; }

See the Pen CSS Hexagon in SCSS by Blake Simpson (@brsim) on CodePen.

LESS

@hex-size: 180px;
@hex-height: @hex-size / sqrt(3);
@hex-color: #1D365D;

.hexagon { position: relative; width: @hex-size; height: @hex-height; background-color: @hex-color; margin: @hex-height/2; }

.hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: @hex-size/2 solid transparent; border-right: @hex-size/2 solid transparent; }

.hexagon:before { bottom: 100%; border-bottom: @hex-height/2 solid @hex-color; }

.hexagon:after { top: 100%; width: 0; border-top: @hex-height/2 solid @hex-color; }

See the Pen CSS Hexagon in LESS by Blake Simpson (@brsim) on CodePen.

SCSS with Text Label

$hex-size: 180px;
$hex-height: $hex-size / sqrt(3);
$hex-color: #C6538C;

.hexagon { position: relative; width: $hex-size; height: $hex-height; background-color: $hex-color; margin: $hex-height/2; }

.hexagon .text { position: absolute; top: 0; left: 0; font: $hex-height/2 sans-serif; color: #fff; width: $hex-size; height: $hex-height; text-align: center; overflow: hidden; line-height: $hex-height; }

.hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: $hex-size/2 solid transparent; border-right: $hex-size/2 solid transparent; }

.hexagon:before { bottom: 100%; border-bottom: $hex-height/2 solid $hex-color; }

.hexagon:after { top: 100%; left: 0; width: 0; border-top: $hex-height/2 solid $hex-color; }

See the Pen CSS Hexagon in LESS by Blake Simpson (@brsim) on CodePen.