如何在body外部创建45°倾斜且贴合其右上角的自适应div？

首先调整HTML结构：按HTML规范，<body>外不能直接放置元素（<html>的直接子元素只能是<head>和<body>），所以把目标div放在<body>内，通过定位实现视觉上在body外部的效果即可：

<html>
  <body>
    <div class="target"></div>
  </body>
</html>

然后修正CSS，解决定位和适配问题：

/* 清除body默认边距，确保边缘对齐视口 */
body {
  margin: 0;
  /* 可选：给body加背景色，方便区分效果 */
  background: #fff;
}

.target {
  position: fixed;
  /* 定位到视口右上角，与body右上角重合 */
  top: 0;
  right: 0;
  /* 将旋转中心设为右上角，保证旋转后该点位置不变 */
  transform-origin: top right;
  /* 先平移修正位置，再旋转45度，适配任意宽高的body */
  transform: translate(calc(50% - 50vh), 0) rotate(-45deg);
  /* 用视口高度作为宽度，确保旋转后延伸长度足够 */
  width: 100vh;
  /* 这里的height对应你要的div"宽度"，可按需调整数值 */
  height: 50px;
  /* 示例背景色，方便查看效果 */
  background: #888;
  /* 若不想遮挡body内容，可降低层级 */
  z-index: -1;
}

关键设置说明： #

• transform-origin: top right：固定旋转中心在div右上角，确保旋转后该点始终贴合body右上角。
• transform: translate(calc(50% - 50vh), 0) rotate(-45deg)：平移操作修正旋转后的位置偏移，保证无论body宽高如何变化，div都能正确对齐。
• width: 100vh：利用视口高度作为宽度，保证旋转后div能延伸到合适长度，适配各种屏幕尺寸。

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