:root {
background: #666;
font-size: 8vmin;
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translatE: -50% -50%;
width: 9em;
height: 3.2em;
background:
linear-gradient(30deg, #0000 0 0.5em, #444 0 1em, #0000 0) 2em calc(50% - 0.7em) / 8em 0.6em,
repeating-linear-gradient(90deg, #aaa 0 1em, #777 0 2em) 1em 50% / 8em 0.8em,
repeating-linear-gradient(30deg, #ddd 0 0.5em, #aaa 0 1em) 1em calc(50% - 0.7em) / 8em 0.6em,
repeating-linear-gradient(-30deg, #444 0 0.5em, #111 0 1em) 1em calc(50% + 0.7em) / 8em 0.6em,
repeating-linear-gradient(90deg, #777 0 1em, #aaa 0 2em) 1em 0 / 8em 100%,
linear-gradient(#aaa 0.6em, #ddd 0 50%, #444 0 calc(100% - 0.6em), #aaaa 0);
background-repeat: no-repeat;
clip-path:
polygon(0.05em 0, 0.05em 0.6em, 1em 1.2em, 1em 2em, 0.05em 2.6em, 0.05em 100%, 8em 100%, 8em 2.6em, 99% 2em, 99% 1.2em, 7.9em 0.60em, 7.9em 0)
}
&::after {
content: "A \a B";
position: absolute;
white-space: pre-wrap;
font-family: Helvetica, arial, sans-serif;
font-size: 0.2em;
color: white;
top: 50%;
left: 50%;
translatE: -50% -50%;
width: 36em;
height: 10em;
display: flex;
align-items: center;
line-height: 8.5em;
padding-inline-start: 8em;
box-sizing: border-box;
color: yellow;
}
}
About This Illusion
You have probably seen the illusion involving a checkerboard and an object casting a shadow, where two tiles - one seemingly light and one seemingly dark - turn out to be the same color.
This demo follows the same principle. You will see two tiles labeled A and B. Both have the same shade of gray, but most people cannot tell at first glance (or second, or even third).
Coding this was tricky, and it's more of a "one-off" thing, almost a piece of CSS art compared to the others.
Try This
- Look at the squares marked A and B.