:root::before {
content: "";
position: absolute;
font-size: 1vmin;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 50em;
aspect-ratio: 1;
border-top: 2em solid #000;
background:
linear-gradient(
90deg,
#0000 calc(50% - 1em),
#000 0 calc(50% + 1em),
#0000 0
);
box-sizing: content-box;
}
About This Illusion
Both the vertical and horizontal lines are the same length, but the vertical line appears longer.
This illusion is easy to code in CSS and easy to fall for.
Try This
- Mouse over the demo to see the illusion in action.