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.
我试图在六边形div周围设置边框,或者更准确地将六边形可见区域设为3个div。我尝试了一些不同的方法来创建一个边界与div的可见性玩耍。我在下面的例子中得到的是我最接近但仍然显示应隐藏的div的溢出。
I found the code to create hexagon shapes here or on git can't remember where exactly. so that isn't my creation.
我发现在这里或在git上创建六边形的代码不记得究竟在哪里。所以这不是我的创作。
.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.
我得到了我想要的东西,增加了3个额外的div和许多额外的css仍然不满意,所以希望有人有任何建议。
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>1 个解决方案
#1
1
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.
我想我有一个解决方案。有相当数量的CSS,但它只使用两个div。六边形内有一个六边形,并使用外边框作为边框。
#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:
和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.
如果你感到困扰,很多CSS实际上可以缩短。它相当短,CSS相当干净。
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
同样在将来,我建议您使用无前缀。它是一个JS脚本,可以自动为您的CSS添加浏览器前缀,这意味着您可以放置
transform: rotate(-60deg);
And it'll add -moz-, -webkit-, -ms- and -o-.
它还会添加-moz-,-webkit-,-ms-和-o-。
Hope this works for you..
希望这对你有用..
#1
1
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.
我想我有一个解决方案。有相当数量的CSS,但它只使用两个div。六边形内有一个六边形,并使用外边框作为边框。
#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:
和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.
如果你感到困扰,很多CSS实际上可以缩短。它相当短,CSS相当干净。
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
同样在将来,我建议您使用无前缀。它是一个JS脚本,可以自动为您的CSS添加浏览器前缀,这意味着您可以放置
transform: rotate(-60deg);
And it'll add -moz-, -webkit-, -ms- and -o-.
它还会添加-moz-,-webkit-,-ms-和-o-。
Hope this works for you..
希望这对你有用..