Tilted Table Illusion - CSS Optical Illusions

Code Live Demo

:root {
  --color: #000;
  background: radial-gradient(circle, blue 1vmin, #0000 0);
  height: 100vh;
  overflow: hidden;  
  
  &::before {
    background:
      repeating-linear-gradient(
        10deg,
        #fff 0 0.7vmin,
        var(--color) 0 1vmin
      );
    border: 0.5vmin solid;
    content: "";
    height: 8vmin;
    left: 50%;
    position: absolute;
    top: calc(50% - 1vmin);
    translate: -50% -100%;
    width: 80vmin;
  }
  
  &::after {
    background: 
      repeating-linear-gradient(
        -10deg,
        #fff 0 0.7vmin,
        var(--color) 0 1vmin
      );
    border: 0.5vmin solid;
    content: "";
    height: 10vmin;
    left: 50%;
    position: absolute;
    top: calc(50% + 1vmin);
    translate: -50% 0%;
    width: 35vmin;
  }
}

About This Illusion

It looks like the top rectangle is leaning to the left, but it is actually parallel to the one at the bottom. The trick lies in the direction of the diagonal lines used to "color" each rectangle.

This illusion works better on larger screens. The effect is diminished when you can see the "whole picture."

Try This

Mouse over the demo to see the illusion in action.