-1

I have some question to know === I know that Next comes to solve many React issues,What are these problems that I face I am not talking about server side rendering and solid state relays

Amr Hendawy
  • 21
  • 7

1 Answers1

1

Just use flex.

.container {
  display: flex;
}

.container div {
  width: 25%;
  padding-bottom: 100%;
  transform: skewX(20deg);
}

.container div:nth-child(1) {
  background: purple;
}

.container div:nth-child(2) {
  background: green;
}

.container div:nth-child(3) {
  background: red;
}

.container div:nth-child(4) {
  background: blue;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Code Spirit
  • 3,992
  • 4
  • 23
  • 34
  • If I don't want to start from the white space but the start of the color at the beginning can I use translateX ? – Amr Hendawy Sep 28 '22 at 14:39
  • 1
    If you mean the whitespace that appears because the images are skewed at start and end you can use position or negative margin on `.container` to expand its width and cut off the whitespace with overflow hidden. – Code Spirit Sep 28 '22 at 16:37