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

Done with placing the hexagonal shape on top of another. where black Hexagon at the bottom and white at the top.

Here is the result

jsFiddle here

Only will be like a border