CODEWITHSUNDEEP
htmlcssreactjs
Pedro
Pedro

Reputation: 125

How to align geometric shapes

I'm trying to align geometric shapes like this image bellow

enter image description here

I tried to use position absolute but I didn't have success, this is my code that I tried to use

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

enter image description here

it's like this on the screen

If you can help me, or show me the way a was gratefull

Upvotes: 0

Views: 149

Answers (1)

Temani Afif
Temani Afif

Reputation: 273481

Put all of them above each other then use transformation. Here is an example:

.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>

Without CSS grid for better support:

.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>

Upvotes: 1

Related Questions