<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;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.