<div class="not-supported"> Your browser doesn't support this demo. It is only supported in Chrome 125+</div>
<ul>
<li style="--index: 0;">
<div class="anchor">anchor 1</div>
<div class="target">target 1</div>
</li>
<li style="--index: 1;">
<div class="anchor">anchor 2</div>
<div class="target">target 2</div>
</li>
<li style="--index: 2;">
<div class="anchor">anchor 3</div>
<div class="target">target 3</div>
</li>
</ul>
:root {
--anchor-side: clamp(50px, 10vw, 100px);
}
.anchor {
anchor-name: --my-anchor;
height: var(--anchor-side);
aspect-ratio: 1;
}
.target {
position: absolute;
position-anchor: --my-anchor;
position-area: top right;
height: var(--anchor-side);
aspect-ratio: 1;
}
/* Aesthetic Changes */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: clamp(10px, 3vw, 18px);
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: monospace;
}
ul {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
margin-right: var(--anchor-side);
}
li {
list-style: none;
}
.anchor,
.target {
display: flex;
align-items: center;
justify-content: center;
border: 3.5px solid #372f3b;
border-radius: 10px;
padding: 5px;
font-weight: 600;
font-size: 1rem;
text-align: center;
}
.anchor {
transform: rotateX(25deg);
background-color: #f7941f;
box-shadow: 0px 9px 0px -3px #f7941fa0, 0px 9px 0px 0px #372f3b,
-4px 14px 4px 4px #0005, inset -4px -4px 4px 4px rgba(0, 0, 0, 0.15);
}
.target {
transform: rotateX(25deg) translateZ(calc(25px * var(--index)));
background-color: #cb6ce6;
box-shadow: 0px 9px 0px -3px #cb6ce6a0, 0px 9px 0px 0px #372f3b,
inset -4px -4px 4px 4px rgba(0, 0, 0, 0.15);
}
li:first-child .target {
box-shadow: 0px 9px 0px -3px #cb6ce6a0, 0px 9px 0px 0px #372f3b,
-14px 14px 4px 4px #0005, inset -4px -4px 4px 4px rgba(0, 0, 0, 0.2);
}
.not-supported {
position: fixed;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 40px;
font-weight: 600;
background-color: #ffbd59aa;
}
@supports (inset-area: top right) {
.target {
inset-area: top right;
}
}
@supports (position-area: top right) or (inset-area: top right) {
.not-supported {
display: none;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.