@property --c {
syntax: '<color>';
inherits: true;
initial-value: #000;
}
:root {
height: 100vh;
margin: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10vmin;
transition: --c 1s;
&:hover {
--c: #0000;
}
&::before, &::after {
--x1: 0; --y1: 0;
--x2: 0; --y2: 100%;
--x3: 100%; --y3: 100%;
--x4: 100%; --y4: 0;
--l: #0000 47.5%, var(--c) 0 52.5%, #0000 0;
content: "";
width: 80vmin;
aspect-ratio: 3;
background:
/* all lines have the same size, only position changes! */
linear-gradient(#000 0 0) 50% 50% / 60% 5%,
linear-gradient(to bottom left, var(--l)) var(--x1) var(--y1) / 20% 50%,
linear-gradient(to bottom right, var(--l)) var(--x2) var(--y2) / 20% 50%,
linear-gradient(to bottom left, var(--l)) var(--x3) var(--y3) / 20% 50%,
linear-gradient(to bottom right, var(--l)) var(--x4) var(--y4) / 20% 50%
;
background-repeat: no-repeat;
}
&::after {
--x1: 16vmin; --y1: 100%;
--x2: 16vmin; --y2: 0%;
--x3: calc(100% - 16vmin); --y3: 0%;
--x4: calc(100% - 16vmin); --y4: 100%;
}
}
About This Illusion
A classic illusion: the horizontal lines are the same length, but inward- or outward-pointing edges dramatically change how we perceive them. I could swear the top one is longer. But it is not.
From a coding perspective, each shape is a pseudo-element. I ensured the horizontal lines were identical by using the same gradients and only repositioning the edges in the ::before and ::after.
Try This
- Mouse over the demo to see the illusion in action.