:root {
margin: 0;
height: 100vh;
overflow: hidden;
background:
repeating-linear-gradient(
90deg,
#ff0 0 5vmin,
#0000 0 10vmin
),
repeating-linear-gradient(
-70deg,
#0000 0 3vmin,
#000 0 3.5vmin
);
}
About This Illusion
The Poggendorff illusion is an optical illusion in which a diagonal line interrupted by a vertical bar appears misaligned, even when both segments are actually continuous.
This illusion is really easy to create with CSS: two repeating linear gradients do the trick. One diagonal gradient for the lines, and another vertical gradient for the bars on top.
Try This
- Mouse over the demo to see the illusion in action.