<div class="container">
  <!--  可変コンテンツの例  -->
  <textarea readonly style="display: block; width: calc(100vw - 16px); max-width: calc(100vw - 16px); height: calc(100vh - 16px); max-height: calc(100vh - 16px); outline: none;">
  </textarea>
  <div class="diagonal-box"></div>
</div>

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

.container {
  position: relative;
  width: fit-content;
}

.diagonal-box {
  container-type: size;
  position: absolute;
  height: 100%;
  background: rgba(0,0,0,0.25);
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  
  &::before {
    content: "";
    display: block;
    position: absolute;
    width: max(200cqh, 200cqw);
    border-bottom: 1px solid red;
    transform: rotate(atan2(100cqh, 100cqw));
    transform-origin: left top;
    top: 0;
    left: 0;
  }
}