全屏
<textarea class="anchor-1"></textarea>
<textarea class="anchor-2"></textarea>
<div class="target"></div>
textarea {
  position: absolute;
}

.anchor-1 {
  anchor-name: --anchor-1;
  top: 0;
  left: 0;
  
  &::before {
    bottom: 0;
    right: 0;
  }
}

.anchor-2 {
  anchor-name: --anchor-2;
  bottom: 0;
  right: 0;
  rotate: 180deg;
  
  &::before {
    bottom: 0;
    right: 0;
  }
}

.target {
  background-image: url("images/gumby-2.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
  position: absolute;
  
  top: anchor(--anchor-1 bottom);
  left: anchor(--anchor-1 right);
  bottom: anchor(--anchor-2 top);
  right: anchor(--anchor-2 left);
}
返回