Pen: simple CSS hexagon

readme.md

A Pen by William Duyck

So somewhere on the internetz I stumbled into an article on CSS shapes, and from there, CSS hexagons. The article's well worth a read, however there was one more thing that I though could be improved on the final code example... making changing colours easier! This can be done relatively easily by setting the border colour in with the rule for .hex and then having the ::before and ::after rules for border-color inherit.

I've used LESS to create my example, however the processed CSS is still very similar to that in the .less file.

A Pen by William Duyck on CodePen.

License.

index.html

<p>My improvement on CSS Hexagons, inspired by <a href="http://jtauber.github.io/articles/css-hexagon.html">James Tauber's CSS Hexagon Tutorial</a></p>
<span class="hex"></span>

style.less

// This is the colour of the hexagon's background, and border
// and will be defined in `.hex` when parsed to CSS.
@color: #27aae1;

// This has been written as normal CSS to make things easier 
// for those not used to LESS. `@color` will be replaced with 
// the colour defined above
.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: @color;
    border-color: @color;
    position: relative;
    display: inline-block;
}
.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid;
    border-color: inherit;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}
.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid;
    border-color: inherit;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}