如何使用 HTML 和 CSS 从 div 的一个角到主屏幕的一个角绘制一条线并保持响应？

Question

我只想使用 HTML 和 CSS，并想在居中 div 的角到主屏幕区域的角之间画一条线，如下图所示，主要是如何保持响应。

Answer 1

//HTML

    <div style="height: 300px; width: 500px;
    border: 3px solid red;" class="parent">
    <div class="diagonal-ltor" style="border-bottom: 3px solid rgb(0, 47, 255);    
    transform-origin: left top;"></div>
    </div>
    <div style="height: 300px; width: 500px;">
    <div class=" diagonal-rtol" style="border-bottom: 3px solid rgb(0, 47, 255);    
    transform-origin: left top;"></div>
   </div>
   <script src="sample.js"></script>

样本.js

 let parent = document.querySelector(".parent");
 let lineLToR = document.querySelector(".diagonal-ltor");
 let lineRToL = document.querySelector(".diagonal-rtol")
 let lineSize = (Math.sqrt(parent.clientWidth ** 2 + parent.clientHeight ** 2) / 
 parent.clientWidth) * 100 + .7;
 let rotateRadian = Math.asin(parent.clientHeight / 
 (Math.sqrt(parent.clientWidth ** 
 2 + parent.clientHeight ** 2)));
 let rotateDegree = rotateRadian * (180 / Math.PI);

 lineLToR.style.width = `${lineSize}%`;
 lineLToR.style.transform = `rotate(${rotateDegree}deg)`;
 lineRToL.style.width = `${lineSize}%`;
 lineRToL.style.transform = `rotate(-${rotateDegree}deg)`;

这可以为您绘制响应式对角线，用于添加我上面提到的登录框使用位置。