Блог

Главная - Вопросы по программированию - Как выровнять геометрические фигуры

Как выровнять геометрические фигуры

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

Я пытаюсь выровнять геометрические фигуры, подобные этому изображению ниже

введите описание изображения здесь

Я пытался использовать абсолютную позицию, но у меня не получилось, это мой код, который я пытался использовать

 <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;
}

введите описание изображения здесь

на экране это выглядит так

Если вы можете мне помочь или показать мне, как a был благодарен

Ответ №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>

Комментарии:

1. Большое вам спасибо за ваше время и ваш ответ, но у меня уже есть созданная фигура, это svg, я импортировал и вывел на экран, я просто хочу выровнять, как на первом рисунке, я не знаю, как использовать css grid или position absolute.

2. @Pedro вам не нужно воссоздавать фигуру. Вам нужно следовать той же логике. Я создал фигуру из sractch, чтобы проиллюстрировать трюк, и поскольку это шестиугольник, он будет работать так же, как и у вас. Просто замените мою фигуру на вашу