Border around a hexagon shaped div

Question

I'm trying to put a border around a hexagon shaped div or more accurate the hexagon shaped visible area of 3 divs. I have tried some different ways of creating a border playing around with the visibility of the divs. What I have in the below example is the closest I came but still showing the overflow of the divs thats should be hidden.

I found the code to create hexagon shapes here or on git can't remember where exactly. so that isn't my creation.

.hexagon {
    overflow: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);

}
.hexagon-in2 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.hexagon {
    width:  200px;
    height: 300px;
}

#hex1_bg{ background-color: rgb(181,144,223) }

.hexagon, .hexagon-in1, .hexagon-in2{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 5px solid gold;
    border-right: 5px solid gold;
}

<div class="hexagon" id="hex1">
 <div class="hexagon-in1">
  <div class="hexagon-in2" id="hex1_bg">
  </div>
 </div>
</div>

Update:

Wasn't happy with the looks of the suggested solution it does fix the border problem but created a other problem for me with the pointer already changing when hoover over the white space surrounding the hexagon

I get exactly what i want by adding 3 extra divs and lots of extra css still not happy with it so hoping someone has any suggestions.

The code show what i want to create but preferable with less code.

.hexagon {
    position: relative;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}
.hexagon-in1 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.hexagon-in2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.hexagon {
    width:  200px;
    height: 300px;
}

#hex1_bg{ background-color: rgb(181,144,223) }

.bordergon{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 2px solid red;
    border-right: 2px solid red;
}
.bordergon-in1{
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 2px solid red;
    border-right: 2px solid red;
}
.bordergon-in2{
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    transform: rotate(-120deg);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

<div class="hexagon" id="hex1">
 <div class="hexagon-in1">
  <div class="hexagon-in2" id="hex1_bg">
            <div class="bordergon"></div>
            <div class="bordergon-in1"></div>
            <div class="bordergon-in2"></div>
  </div>
 </div>
</div>

Have a look at http://stackoverflow.com/questions/19418486/hexagon-shape-with-a-border-outline/31919429?s=33|0.0000#31919429 — Harry, Nov 23 '15 at 16:05
in the second example indeed it does in this [example](http://stackoverflow.com/questions/19418486/hexagon-shape-with-a-border-outline/31919429?s=33|0.0000#31919429) — Mazaka, Nov 23 '15 at 17:08
@Mazaka: I don't know what browser you are using or how you implemented that solution but it most definitely shouldn't cause cursor change when hovering outside because the `div` is being clipped. Clip by nature would avoid cursor changing when hovering outside the clipped area. — Harry, Nov 23 '15 at 17:23
@harry you are right I looked again and it doesn't cause a problem I made a mistake and put the pointer in the wrong box or something else also wasn't using your example but the accepted awnser. Gonna look to that again. — Mazaka, Nov 23 '15 at 17:49

score 1 · Answer 1 · answered Nov 30 '15 at 01:21

I think I have a solution. There is a fair amount of CSS but it only uses two divs. You have a hexagon inside a hexagon and use the outer one as the border.

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
    margin-top: 25px;
}

#hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}

#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

#hexagonIn {
    width: 95%;
    height: 95%;
    background: blue;
    position: relative;
    margin: auto;
    margin-top: 25px;
}

#hexagonIn:before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 47px solid transparent;
    border-right: 47px solid transparent;
    border-bottom: 23px solid blue;
}

#hexagonIn:after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 47px solid transparent;
    border-right: 47px solid transparent;
    border-top: 24px solid blue;
    z-index: 1;
}

And the HTML:

<div id="hexagon">
    <div id="hexagonIn"></div>
</div>

A lot of the CSS can actually be shortened if you can be bothered. It's a fair amount shorter and the CSS is fairly clean.

Also in the future, I advise that you use prefix-free. It's a JS script that automatically adds browsers prefixes to your CSS meaning you can just put

transform: rotate(-60deg);

And it'll add -moz-, -webkit-, -ms- and -o-.

Hope this works for you..

Border around a hexagon shaped div

1 Answers1