两个六边形的中心

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://imgur.com/a/aUNHu8L

Answer 1

您可以使用 "Flexbox" 进行水平和垂直 center.You 可以在 FlexBox Guide 中学习。对于您的解决方案，从六边形内部删除边距 class 并添加

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

六边形 class.

Answer 2

3 个六边形使用 clip-path - 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>

两个六边形的中心

Centering of two hexagons

html

css

centering

3 个六边形使用 clip-path - img on img

另一个不使用 px 或百分比的解决方案，您可以更改位置和附件 - 在 `.copy-background` 和 `.container`

两个六边形的中心

Centering of two hexagons

html

css

centering

3 个六边形使用 clip-path - img on img

另一个不使用 px 或百分比的解决方案，您可以更改位置和附件 - 在 .copy-background 和 .container

另一个不使用 px 或百分比的解决方案，您可以更改位置和附件 - 在 `.copy-background` 和 `.container`