我有两个六边形,一个用于主要背景,另一个用于边界,但是主要的内部六边形稍微偏离了他的位置。
.hexagon {
position: relative;
width: 179.1px;
height: 103.40px;
margin: 51.70px 0;
border-left: solid 5px #c94400;
border-right: solid 5px #c94400;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 126.64px;
height: 126.64px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 21.2286px;
}
.hexagon:before {
top: -63.3214px;
border-top: solid 7.0711px #c94400;
border-right: solid 7.0711px #c94400;
}
.hexagon:after {
bottom: -63.3214px;
border-bottom: solid 7.0711px #c94400;
border-left: solid 7.0711px #c94400;
}
.hexagon-inner {
position: relative;
width: 160px;
height: 92.38px;
background-color: rgba(42, 42, 42, 0.66);
margin: 46.19px 0;
}
.hexagon-inner:before,
.hexagon-inner:after {
content: "";
position: absolute;
width: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
}
.hexagon-inner:before {
bottom: 100%;
border-bottom: 46.19px solid rgba(42, 42, 42, 0.66);
}
.hexagon-inner:after {
top: 100%;
width: 0;
border-top: 46.19px solid rgba(42, 42, 42, 0.66);
}
}
<div class="hexagon">
<div class="hexagon-inner"></div>
</div>
如何将主六角形放在中间的内六角形中间?我尝试使用六角形div的边距,但是两个六角形同时移动。使六边形居中的最佳方法是什么?
您可以在水平和垂直中心使用“ Flexbox”。您可以在FlexBox Guide中学习。对于您的解决方案,请从内六角类中删除边距并添加
display: flex;
align-items: center;
justify-content: center;
六角类。
我提供另一种解决方案,
这是实现此目的的好技巧,您可以使用百分比或px。
.container {
height: 240px;
width: 240px;
background-image: url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop);
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.hexagon {
transform: rotate(30deg);
/* height: 173.2px; */
/* width: 200px; */
height: 69.28%;
width: 80%;
position: relative;
}
.hex {
position: absolute;
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.hexagon1 {
height: 100%;
width: 100%;
background-color: rgb(201, 68, 0);
}
.hexagon2 {
height: 92%;
width: 92%;
top: 4%;
left: 4%;
}
.copy-background {
transform: rotate(-30deg);
height: 124%;
width: 124%;
position: relative;
top: -12%;
left: -12%;
background-image: url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop);
/* background-size: 320px; */
/* background-position: -6px -21px; */
background-size: 146%;
background-position: 10% 50%;
background-repeat: no-repeat;
}
.hexagon3 {
height: 84%;
width: 84%;
top: 8%;
left: 8%;
background-color: rgba(35, 35, 35, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.text {
transform: rotate(-30deg);
}
<div class="container">
<div class="hexagon">
<div class="hex hexagon1"></div>
<div class="hex hexagon2">
<div class="copy-background"></div>
</div>
<div class="hex hexagon3">
<span class="text">VONIA</span>
</div>
</div>
</div>
.copy-background
和.container
中更改位置和附件-两者->
.container { height: 240px; width: 240px; background-image: url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; display: flex; align-items: center; justify-content: center; } .hexagon { transform: rotate(30deg); height: 69.28%; width: 80%; position: relative; } .hex { position: absolute; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } .hexagon1 { height: 100%; width: 100%; background-color: rgb(201, 68, 0); } .hexagon2 { height: 92%; width: 92%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .copy-background { overflow: hidden; top: 0; left: -18%; right: 0; bottom: 0; margin: auto; height: 240px; width: 240px; transform: rotate(-30deg); position: absolute; background-image: url(https://wickes.scene7.com/is/image/travisperkins/GPID_1100100003_02?wid=824&hei=618&fit=crop); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } .hexagon3 { height: 84%; width: 84%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: rgba(35, 35, 35, 0.7); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .text { transform: rotate(-30deg); }
<div class="container"> <div class="hexagon"> <div class="hex hexagon1"></div> <div class="hex hexagon2"> <div class="copy-background"></div> </div> <div class="hex hexagon3"> <span class="text">VONIA</span> </div> </div> </div>