How to connect rotated div elements?

Question

Im trying to connect rotated divs by 45deg, and cant figure how to do it. The page is currently in this state:

Screenshot of the page:

Im trying to achieve something like:

.box {
    border-style: groove;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!-- Body -->
<div class="d-flex w-100 h-100 justify-content-center align-items-center p-5">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>

Could you please provide actual HTML and CSS or link to sandbox — Dmitrii Zolotuhin, Oct 16 '21 at 11:37
@DmitriiZolotuhin sorry i forgot to add the css, its in the post now :) — SansSerif, Oct 16 '21 at 11:41
Search for `diamond grid css` -> That should give you plenty resources to start with. — tacoshy, Oct 16 '21 at 11:42

Temani Afif · Accepted Answer · 2021-10-16T11:54:48.303

Here is a demo taken from my article: https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/

You can find all the detail there:

.main {
  display:flex;
  --s: 100px;  /* size  */
  --m: 4px;    /* space */
  --r: calc(var(--s) + 4*var(--m) - 2px);
}

.container {
  font-size: 0;
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: var(--s);
  display: inline-block;
  font-size:initial;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: red;
  margin-bottom: calc(var(--m) - var(--s)*0.5);
}
.container div:nth-child(odd) {
  background:green;
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 140%;
  shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--r) - 3px),      
                   #000  0 var(--r));
}

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

You can also update it like below to use transform and add border

.main {
  display:flex;
  --s: 100px;  /* size  */
  --m: 4px;    /* space */
  --r: calc(var(--s) + 4*var(--m) - 2px);
}

.container {
  font-size: 0;
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: var(--s);
  display: inline-block;
  font-size:initial;
  transform:rotate(45deg) scale(0.707);
  border:2px solid;
  box-sizing:border-box;
  margin-bottom: calc(var(--m) - var(--s)*0.5);
}

.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 140%;
  shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--r) - 3px),      
                   #000  0 var(--r));
}

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

score 0 · Answer 2 · answered Oct 16 '21 at 11:57

body {
  margin-top: 200px;
}

.container {
  padding: 50px 0px;
  display: flex;
  width: 500px;
  flex-wrap: wrap;
  margin-top: -98px;
}

.box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: -16px 21px;
  transform-origin: bottom right;
  transform: rotate(45deg);
}
.container.withMargin {
  margin-left: 72px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="./src/styles.css" />
  </head>

  <body>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="container withMargin">
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

How to connect rotated div elements?

2 Answers2