两个六边形的居中

Question

我有两个六边形，一个用于主背景，另一个用于边框，但主十六进制内部有点偏离他的位置。

.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 的边距，但两个十六进制同时移动。使这个六边形居中的最佳方法是什么？

我的期望：https://i.stack.imgur.com/M6EBy.jpg

Answer 1

您可以使用"Flexbox"表示水平和垂直居中。您可以在 FlexBox 指南中了解。对于您的解决方案，请从六边形内部类中删除边距并添加

display: flex;
align-items: center;
justify-content: center;

在六边形类中。

Answer 2

3 个

六边形使用剪辑路径 - img on img

我提供另一种解决方案，

这是实现这一目标的好技巧，您可以使用百分比或 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>

另一种不使用 px 或百分比的解决方案，您可以更改位置和附件 - 两者 - 以.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>