如何让旋转后的Div在任意屏幕比例下都能完全覆盖？

问题根源 #

你遇到的问题本质是旋转后的元素尺寸不足以覆盖屏幕对角线：当元素旋转45°后，其有效覆盖范围的最小尺寸需要等于屏幕对角线长度，而原代码中width:100%仅对应屏幕的宽/高中的一个维度，在竖屏等场景下远小于对角线长度，导致波浪移动到角落时无法覆盖整个屏幕。

纯CSS修复方案 #

通过使用视口单位vmin结合根号2的近似值（≈1.4142），让波浪元素的尺寸刚好覆盖屏幕对角线，再调整动画参数确保移动路径完整覆盖屏幕。

修改后的代码：

CSS

body { 
  margin: 0; 
  height: 100%; 
  overflow: hidden; /* 防止波浪元素超出视口时出现滚动条 */
} 

#background-image { 
  background-image: url("https://www.transparenttextures.com/patterns/black-felt.png"); 
  height: 100vh; 
  background-size: 50vh; 
  position: absolute; 
  z-index: 2; 
  filter: grayscale(100%) brightness(20%); 
  inset: 0; /* 替代right/left/top/bottom:0，更简洁 */
} 

#background-neon { 
  /* 用sqrt(2)*100vmin确保尺寸覆盖屏幕对角线 */
  width: calc(100vmin * 1.4142); 
  height: 10%; 
  position: absolute; 
  z-index: 1; 
  transform: rotate(-45deg); 
  transform-origin: center; 
  background-color: rgb(0, 150, 0); 
  animation: move 4s linear infinite; 
} 

@keyframes move { 
  0% { 
    top: -50%; 
    left: calc(-50% * 1.4142); /* 对应宽度的比例，确保起始位置在屏幕外左上 */
  } 
  100% { 
    top: 100%; 
    left: calc(100% - (50% * 1.4142)); /* 结束位置在屏幕外右下，保证完全覆盖 */
  } 
}

HTML

<div id="background-neon"></div>
<div id="background-image"></div>

关键调整说明 #

• 尺寸计算：100vmin是视口宽度和高度中的较小值，乘以1.4142（根号2的近似值）后，元素的宽度刚好等于屏幕对角线长度，旋转后无论横竖屏都能完全覆盖屏幕。
• 动画位置适配：调整@keyframes中的left值，让波浪元素的移动路径始终覆盖整个屏幕，避免角落留白。
• 优化细节：用inset:0替代原有的right:0;left:0，添加overflow:hidden到body防止滚动条出现。

内容的提问来源于stack exchange，提问作者Abeloser