What's the best way to link up rotated div elements?

Question

What's the best way to link up rotated div elements?

I'm currently attempting to connect rotated divs at a 45-degree angle, but I'm struggling to find the solution. Here is the current state of the page:

Here is a screenshot of the page:

https://i.sstatic.net/jqPYJ.png

This is what I am aiming for:

https://i.sstatic.net/tcxA1.png

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

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726d726f">[email protected]</a>/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>, ...

html css bootstrap-5

Answer 1

Answer №1

In my latest article, I showcased a demo that you can check out at this link: https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/

All the detailed code snippets and information can be found 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>

To further enhance this design by incorporating transforms and borders, you can make the following modifications:

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

Answer 2

In my latest article, I showcased a demo that you can check out at this link: https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/

All the detailed code snippets and information can be found 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>

To further enhance this design by incorporating transforms and borders, you can make the following modifications:

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

Answer 3

Answer №2

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>

Answer 4

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>

What's the best way to link up rotated div elements?

Answer №1

Answer №2

Similar questions

Updating the value of a localStorage key after each successful AJAX call in JavaScript

"Why are all the rows from my query being returned in my HTML/PHP/AJAX code

Are your macOS devices not displaying the Scrollbar CSS buttons correctly?

Arranging Form Elements with Bootstrap styling

Instructions for including user ID in the URL after successfully logging in with their information

Tips for speeding up page loading when using the same image multiple times on a page

Modify the alignment and orientation of the data within RadHtmlChart

Comparing the name and URL of a link using Selenium webdriver in C#

Tips for avoiding HTML <tags> in the document.write function

What is the best way to switch a single class using jQuery without impacting other elements with the same class

Creating an infinite scroll with a gradient background: a step-by-step guide

PHP multiline string using PHP language

Issue with dynamically adjusting flex box width using JavaScript

What is the process of generating a row in AngularJS?

Creating a fixed "sub-page" within Wicket (e.g.: linking a folder in Wicket)

Is Material-ui's sx feature able to produce optimized utility classes like tailwindcss?

Concealing a message within a section that has been minimized to a width of 0

Complete a wtforms form by selecting a date using the DateField

Should pages be indexed to index.php or should the top and bottom parts of the page be created and included in all content pages?

Is your localhost contact form experiencing issues?