Penrose Triangle - CSS Optical Illusion

Code Live Demo

:root {
  background: #fed;
}

:root::before {
  content: "";
  font-size: 1vmin;
  width: 46em;
  height: 46em;
  position: absolute;
  top: 55%;
  left: 50%;
  background: linear-gradient(#654 0 0) 11em 5em / 8em 8em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 11em 0 / 13em 5em, linear-gradient(#654 0 0) 0 5em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 7.95em 0 / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 0 0 / 13em 5em, linear-gradient(#654 0 0) 0 16em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 7.95em 11em / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 0 11em / 13em 5em, linear-gradient(#654 0 0) 0 27em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 7.95em 22em / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 0 22em / 13em 5em, linear-gradient(#654 0 0) 0 38em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 7.95em 33em / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 0 33em / 13em 5em, linear-gradient(#654 0 0) 8.25em 29.75em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 16.2em 24.75em / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 8.25em 24.75em / 13em 5em, linear-gradient(#654 0 0) 16.75em 21.25em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 24.7em 16.25em / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 16.75em 16.25em / 13em 5em, linear-gradient(#654 0 0) 25em 13em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 32.95em 8em / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 25em 8em / 13em 5em, linear-gradient(#654 0 0) 33em 5em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 40.95em 0 / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 33em 0 / 13em 5em, linear-gradient(#654 0 0) 22em 5em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 29.95em 0 / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 22em 0 / 13em 5em, linear-gradient(#654 0 0) 11em 5em / 8em 8em, linear-gradient(-45deg, #0000 28%, #876 0 72.5%, #0000 0) 18.95em 0 / 5em 13em, linear-gradient(-45deg, #0000 27.5%, #a98 0 72%, #0000 0) 11em 0 / 13em 5em, #0000;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) skewY(20deg);
}

About This Illusion

This optical illusion depicts an impossible shape. Parts that should be in front appear in the back, top becomes right, and everything feels contradictory.

There are many ways to code a Penrose Triangle. I coded this one some time ago for the 2024 Divtober event... so it is a single DIV and a bunch of CSS!

Try This

Follow the triangle elements to reveal the impossible connections.