2

this is the desired design I hope I can reach

desired outcome

and this is as far as I got, it's the idea of stacking my divs together so they look like the first picture that I can't wrap my head around

my code

my code

html


        <div
            class="container-fluid d-flex flex-wrap justify-content-between h-100 w-100"
        >
            <div class="square bg-info bg-gradient"><div class="text">hello1</div></div>
            <div class="square bg-dark bg-gradient"><div class="text">hello2</div></div>
            <div class="square bg-primary bg-gradient"><div class="text">hello3</div></div>
            <div class="square bg-secondary bg-gradient"><div class="text">hello4</div></div>
            <div class="square bg-success bg-gradient"><div class="text">hello5</div></div>
            <div class="square bg-danger bg-gradient"><div class="text">hello6</div></div>
            <div class="square bg-warning bg-gradient overflow-hidden"><div class="text">
                <img src="img/6.jpg"  class="img-card" alt="">
            </div></div>

//then I repeated the same divs over and over

        </div>

css


body,
html {
    width: 100%;
    max-height: 100%;
    font-family: 'Montserrat', sans-serif;
    padding: 5px;
    color: white;
}




.square{
    width: 100px;
    height: 100px;
    margin: 20px;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.square .text{
    transform: rotate(-45deg);

}

.img-card{
    width: 250px;
}

any help will be appreciated,

thanks in advance

gallifrey
  • 51
  • 5
  • easiest way to achieve with a grid and rotating. Plenty exampels already on SO. – tacoshy Jan 14 '21 at 22:09
  • This isn't really something CSS supports using any of its built-in mechanisms - but you could use absolute positioning and a clipping-mask. I recommend avoiding the use of transformations as that will complicate things like text-layout. – Dai Jan 14 '21 at 22:09
  • @tacoshy It isn't a true grid though, as elements then need to be laid-out in a a diagonal line within that grid, which CSS's automatic grid layout system does not support. – Dai Jan 14 '21 at 22:09
  • Another approach is to use a CSS grid or 3-line flex box of rotated squares, but add an extra margin to the left side of every alternate row so they line-up in that fashion. You may have issues with the browser determining `:hover` status though. – Dai Jan 14 '21 at 22:11

2 Answers2

1

I will consider the idea I used in my answer for a hexagon grid. I will simply adjust the shape to use a rhombus instead of a hexagon

.container {
  --s: 150px;  /* size  */
  --m: 4px;    /* space */
  font-size: 0;  /* disable default white space between inline element */
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: var(--s);
  display: inline-block;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: pink;
  margin-bottom: calc(var(--m) + var(--s)/-2);
  text-align:center;
  font-size:25px;
  line-height: calc(var(--s));
}
.container div:nth-child(odd) {
  background:red;
}

.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  shape-outside: 
   repeating-linear-gradient(
     transparent 0 calc(var(--s) + 4*var(--m)), 
     #fff        0 calc(var(--s) + 6*var(--m)));
}

.main {
  display:flex;
  /* the extra flex wrapper will give me the default stretch alignment 
    and this will allow me to use height:100% on child element of container
    without any explicit height!
    a crazy hack, I know .. */
}
<div class="main">
  <div class="container">
    <div> text </div>
    <div style="background:url(https://picsum.photos/id/1014/200/200)"> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div style="background:url(https://picsum.photos/id/1014/200/200)"> text </div>
    <div> text </div>
    <div> text </div>
    <div style="background:url(https://picsum.photos/id/107/200/200)"> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
    <div> text </div>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0
    body {
      position:initial;
    }
    .row{
      display: flex;
      flex-direction: row;
    }
    .column {
      margin: 10px;
    }
    .column div {
      margin: 10px -20px;
      position: relative;
      width: 60px;
      height: 60px;
      background-color: grey;
      clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    }
    .column:nth-child(odd) div{
      bottom: 30px;
    }

You can do something like this

<body>
  <div class='row'>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  
</body>

https://jsfiddle.net/aktoriukas/3b9pcn8q/48/

aktoriukas
  • 101
  • 5