:root::before {
content: "";
position: absolute;
width: 1vmin;
height: 60vmin;
background: #000;
top: 50%;
left: 50%;
translate: -50% -50%;
rotate: 30deg;
border-radius: 4vmin;
}
:root::after {
content: "";
position: absolute;
width: 8vmin;
height: 60vmin;
background: #fff;
border-inline: 1vmin solid #000;
top: 50%;
left: 50%;
translate: -50% -50%;
transition: background-color 1s;
}
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.
A simple version of this effect can achieved using the ::before and
::after pseudo-elements to create the diagonal line and the vertical bar,
respectively.
Try This
- Mouse over the demo to see the illusion in action.