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>
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..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.