:root::before {
content: "";
width: 60vmin;
height: 80vmin;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
background:
linear-gradient(#000 0 0) 30vmin 0 / 9vmin 100%,
radial-gradient(300% 150% at calc(300% + 1vmin) 110%, #0000 calc(100% - 1vmin), #000 0 calc(100% - 1px), #0000 0) 0 0 / 50% 100%,
radial-gradient(300% 150% at calc(-200% - 1vmin) 110%, #0000 calc(100% - 1vmin), #000 0 calc(100% - 1px), #0000 0) 100% 0 / 50% 100%;
background-repeat: no-repeat;
}
About This Illusion
Another variation of tje Poggendorff illusion is the Münsterberg Poggendorff Arch, in which the two sides of an arch appear misaligned and seem as though they will not meet at the top — but they do.
Try This
- Mouse over the demo to see the illusion in action.