html - 如何对齐几何形状

Question

我正在尝试对齐如下图所示的几何形状

我尝试使用绝对位置，但没有成功，这是我尝试使用的代码

<div className={style.container}>
  <div className={style.hexagons}>
    <div>
      <Hexagon />
    </div>
    <Hexagon />
    <div className={style.teste}>
      <Hexagon />
    </div>
  </div>
</div>

CSS：

.container {
  height: 800px;
}

.hexagons {
  display: flex;
  position: absolute;
  width: 100%;
}

.teste {
  margin-top: 50px;
}

屏幕上是这样的

如果你能帮助我，或者告诉我一个感激的方式

标签： htmlcssreactjs

Answer 1

将它们全部放在彼此之上，然后使用转换。这是一个例子：

.box {
  width: 100px; /* adjust this to control the size */
  margin: 80px auto 0;
  display: grid;
}

.box div {
  grid-area: 1/1; /* above each other */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transform: rotate(var(--d)) translate(-52%); /* a little bigger than 50% to create gap */
}

.box div::before {
  content: "";
  padding-top: 86.6%; /* 100%*cos(30) */
  display: block;
}

.box div:nth-child(1) {--d:0deg;   }
.box div:nth-child(2) {--d:120deg; }
.box div:nth-child(3) {--d:240deg; }

<div class="box">
  <div style="background:red;"></div>
  <div style="background:blue;"></div>
  <div style="background:green;"></div>
</div>

没有 CSS 网格以获得更好的支持：

.box {
  width: 100px; /* adjust this to control the size */
  margin: 80px auto 0;
  position:relative;
}

.box div {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transform: rotate(var(--d)) translate(-52%); /* a little bigger than 50% to create gap */
}
.box div:not(:first-child) {
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.box div::before {
  content: "";
  padding-top: 86.6%; /* 100%*cos(30) */
  display: block;
}

.box div:nth-child(1) {--d:0deg;   }
.box div:nth-child(2) {--d:120deg; }
.box div:nth-child(3) {--d:240deg; }

<div class="box">
  <div style="background:red;"></div>
  <div style="background:blue;"></div>
  <div style="background:green;"></div>
</div>