Hexagon shape with a border/outline

Question

I know it\'s possible to create a hexagon shape using the following code:

.hex:before {
    content: \" \";
    width: 0; height: 0;
    border-bottom: 30px          


        

Answer 1

You can create that using only one element, using scaleX and rotate transforms. This uses the same method used here, but with one extra pseudo-element on top.

Fiddle

body{font-size: 25px;}
div {
    margin: 3em 0;
    width: 10em;
    height: 5.7736em; /*width / 2*0.866*/
    background: orange;
    box-shadow: inset -1.22em 0 0 0 navy, inset 1.22em 0 0 0 navy, inset -2.44em 0 0 0 crimson, inset 2.44em 0 0 0 crimson;
    position: relative;
}
div:before, div:after {
    content: '';
    position: absolute;
    background: inherit;
    width:4.08em; 
    height:4.08em;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleX(1.73) rotate(45deg);
    -moz-transform: scaleX(1.73) rotate(45deg);
    -ms-transform: scaleX(1.73) rotate(45deg);
    transform: scaleX(1.73) rotate(45deg);
}
div:before {
    top: -4.08em;
    box-shadow: inset 0 1em 0 0 navy, inset 1em 0 0 0 navy, inset 0 2em 0 0 crimson, inset 2em 0 0 0 crimson;
}
div:after {
    bottom: 0;
    box-shadow: inset 0 -1em 0 0 navy, inset -1em 0 0 0 navy, inset 0 -2em 0 0 crimson, inset -2em 0 0 0 crimson;
}

You can even add transition effect on hover to this hexagon : Fiddle (hover transition)

The downside of using box-shadows here is that they create visible jagged edges on Firefox.