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 solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

How can I create a hexagon that's filled with one color, and outlined with another? I'm trying to fiddle with it, but it does not seem to be possible.

Any other alternatives are welcome, I would like to avoid using images.

Answer 1

It is not directly possible to achieve this, as hexagons are created by borders through pseudo elements. An alternative would be to overlay hexagons within hexagons, thus achieving the same desired results.

Here is an example of what can be achieved:

LIVE EXAMPLE HERE

HTML - pretty basic, continue the same pattern for more borders.

<div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div>

CSS (three layers - two inner elements)

Start with the hexagon class, defining the shape/size/colors:

.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    content:"";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}
.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}
.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

Style the inner class and use transform: scale() to proportionally decrease the dimensions of the inner elements. In this example, a scale of scale(.8, .8) is used. If you want thicker borders, decrease the numbers; conversely, if you want thinner borders, increase the numbers.

Specify and overwrite the colors, also increase the z-index value to bring the element forward.

.hex.inner {
    background-color:blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:1;
}
.hex.inner:before {
    border-bottom: 60px solid blue;
}
.hex.inner:after {
    border-top: 60px solid blue;
}

Style the second nested element, essentially following the same steps as last time. It's worth nothing that the same scale value is used, because it is within an already scaled element. Of course, you can use whatever you want; this is just a basic example.

.hex.inner2 {
    background-color:red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}

Again, live example here

Answer 2

Here is another method to create hexagons with border (or outline) using the clip-path feature. In this method, we use a container element and a pseudo-element which has smaller dimensions (both height and width ) than the container. When the same clip-path is applied to both the elements, the background-color of the container element is seen behind the pseudo-element only at the edges and makes it look like a border/outline to the shape.

Advantages:

• Hexagons can also have gradients or images (basically non-solid color) as background .
• Shape is responsive and can automatically adapt to any change in the container dimensions.

 .hexagon { position: relative; height: 150px; width: 150px; background: black; } .hexagon:before, .double:after { position: absolute; content: ''; } .hexagon:before { top: 4px; /* border width */ left: 4px; /* border width */ height: calc(100% - 8px); /* 100% - (2 * border width) */ width: calc(100% - 8px); /* 100% - (2 * border width) */ background: #6c6; } .hexagon, .hexagon:before, .double:after { -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .image:before { background: url(http://lorempixel.com/150/150/nature/1); } .double:after { top: 8px; left: 8px; height: calc(100% - 16px); width: calc(100% - 16px); background: black; } /* Just for demo */ .hexagon { display: inline-block; margin: 20px; } 

 <div class="hexagon"></div> <div class="hexagon image"></div> <div class="hexagon double"></div> 

The major disadvantage is the poor browser support at present. CSS clip-path do not work in IE and FF currently. The problem with FF can be fixed by using a SVG (inline or external) for the clip-path (like in the below snippet):

 .hexagon { position: relative; height: 150px; width: 150px; background: black; } .hexagon:before, .double:after { position: absolute; content: ''; } .hexagon, .hexagon:before, .double:after { -webkit-clip-path: url(#hexagon-clip); clip-path: url(#hexagon-clip); } .hexagon:before { top: 4px; /* border width */ left: 4px; /* border width */ height: calc(100% - 8px); /* 100% - (2 * border width) */ width: calc(100% - 8px); /* 100% - (2 * border width) */ background: #6c6; } .image:before { background: url(http://lorempixel.com/200/200); } .double:after { top: 8px; left: 8px; height: calc(100% - 16px); width: calc(100% - 16px); background: black; } /* Just for demo */ .hexagon { display: inline-block; margin: 20px; } 

 <svg width="0" height="0"> <defs> <clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox"> <path d="M0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0, 0.25z" /> </clipPath> </defs> </svg> <div class="hexagon"></div> <div class="hexagon image"></div> <div class="hexagon double"></div> 

Answer 3

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

Answer 4

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; } 

 <div></div> 

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.

Answer 5

Just found this link to a hexagon designer that you can copy the html and css from to get what you want. Thought i'd leave it here for anyone else coming across this post.

So using the tool, to have a white hexagon with a green outline:

 .hexagon { position: relative; width: 100px; height: 57.74px; background-color: #ffffff; margin: 28.87px 0; border-left: solid 5px #28bf20; border-right: solid 5px #28bf20; } .hexagon:before, .hexagon:after { content: ""; position: absolute; z-index: 1; width: 70.71px; height: 70.71px; -webkit-transform: scaleY(0.5774) rotate(-45deg); -ms-transform: scaleY(0.5774) rotate(-45deg); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: 9.6447px; } .hexagon:before { top: -35.3553px; border-top: solid 7.0711px #28bf20; border-right: solid 7.0711px #28bf20; } .hexagon:after { bottom: -35.3553px; border-bottom: solid 7.0711px #28bf20; border-left: solid 7.0711px #28bf20; } 

 <div class="hexagon"></div> 

Answer 6

I made it by using three different elements and is fully working It is the easiest way and you can use the default html borders

 <.Doctype HTML> <html > <head > <title >hexagon with border</title> <style >,hexinner.,hexinner2.:hexinner3{ width; 208px: height; 120px: background; #6C6: position; fixed: left;30%: top; 30%: border-left;solid red 3px: border-right;solid violet 4px. }:hexinner2{ transform; rotate(60deg). }:hexinner3{ transform; rotate(-60deg); } </style> </head> <body > <h3 class="hexinner"> </h3> <h3 class="hexinner2"> </h3> <h3 class="hexinner3"> </h3> </body> </html>

Answer 7

If, like me, you dislike the idea of having HTML elements purely for style, here's a solution using only one element, allowing to have anything you want inside:

 .hexagon { position: relative; height: 150px; width: 150px; /* We cut the element in an hexagonal shape */ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }.hexagon::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; background: black; clip-path: polygon( /* We first go around the pseudo element to recreate the hexagon */ 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, /* We make sure to close the hexagon and go back to the start */ 50% 0%, /* We then go down inside the hexagon (feel free to change the border size, here it is of 10px)*/ 50% 10px, /* We finally go around the pseudo element in reverse to carve a smaller hexagon inside */ /* 0.49999999999999994 is sin(30deg) as it's only supported in Safari for now */ 10px calc(25% + 10px * 0.49999999999999994), 10px calc(75% + 10px * -0.49999999999999994), 50% calc(100% - 10px), calc(100% - 10px) calc(75% + 10px * -0.49999999999999994), calc(100% - 10px) calc(25% + 10px * 0.49999999999999994), 50% 10px ); }

 <div class="hexagon"> <image src="https://picsum.photos/150"/> </div>