<textarea class="anchor-1"></textarea>
<textarea class="anchor-2"></textarea>
<div class="target"></div>
.anchor-1 {
position: absolute;
top: 0;
left: 0;
anchor-name: --anchor-1;
}
.anchor-2 {
position: absolute;
bottom: 0;
right: 0;
rotate: 180deg;
anchor-name: --anchor-2;
}
.target {
background: #222;
position: absolute;
top: anchor(--anchor-1 bottom);
left: anchor(--anchor-1 right);
bottom: anchor(--anchor-2 top);
right: anchor(--anchor-2 left);
}
// Fidgeting with the original demo from Chris Coyier: https://codepen.io/chriscoyier/pen/gONEEZd?editors=0110
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.