基于窗口宽高计算旋转div宽度以预留指定空三角区域的实现问题

核心推导逻辑 #

你当前使用的transform: rotateX(45deg) rotateZ(45deg)变换，会将正方形div投影为固定斜率的菱形：

• 菱形上边缘斜率为-tan(35°)，恰好匹配你要求的左上角55度（与y轴夹角）预留三角的斜边
• 菱形右下边缘斜率同样为-tan(35°)，恰好匹配右下角预留三角的斜边
  因此只需让菱形的右下边缘与右下角预留三角的斜边完全重合，即可满足两端空白三角尺寸一致的要求。

实现代码 #

常量定义 #

// 35度正切值，对应55度角的余切
const TAN_35 = Math.tan(35 * Math.PI / 180);
const SQRT_2 = Math.sqrt(2);
// 左上角预留三角的垂直高度
const OFFSET_HEIGHT = 150;

动态宽度计算函数 #

function calcRotatedDivWidth() {
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  
  // 按右下角约束计算宽度
  const bottomRightWidth = (windowWidth * TAN_35 + windowHeight - OFFSET_HEIGHT) / (SQRT_2 * TAN_35);
  // 保证左上角预留三角高度不小于150px的最小宽度
  const minWidth = 300;
  // 最终取最大值，同时满足两端约束
  const finalWidth = Math.max(minWidth, bottomRightWidth);
  
  // 应用到div，注意div的height需要和width保持一致，为正方形
  const targetDiv = document.querySelector('.rotated-div');
  targetDiv.style.width = `${finalWidth}px`;
  targetDiv.style.height = `${finalWidth}px`;
}

事件绑定 #

// 页面加载时计算
window.addEventListener('load', calcRotatedDivWidth);
// 窗口大小变化时重新计算
window.addEventListener('resize', calcRotatedDivWidth);

注意事项 #

1. 确保旋转div的transform-origin: top left属性保持不变
2. 不需要修改其他transform属性，仅通过上述代码动态修改宽高即可
3. 如果你的div有额外的边框、内边距，需要在计算时对应减去相关尺寸，避免溢出

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