如何在CSS中实现自适应布局下的旋转背景全屏填充？

在div内部或全屏旋转元素时，若元素尺寸固定，我们可以通过设置内部元素的宽高边界来避免旋转时露出下层背景。但在响应式设计中，当页面宽高比差异过大（比如极端宽屏或竖屏），元素对角线长度超过预设的边界尺寸时，下层背景就会暴露出来。

比如下面这个旋转的锥形渐变背景示例，在常规尺寸下可以正常显示，但当页面过宽或过高时，绿色的body背景就会透出来：

示例代码 #

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: green;
}

.pattern {
  width: 200%;
  height: 200%;
  position: fixed;
  top: -50%;
  right: -50%;
  background-image: conic-gradient( white 0deg 45deg, black 45deg 90deg, white 90deg 135deg, black 135deg 180deg, white 180deg 225deg, black 225deg 270deg, white 270deg 315deg, black 315deg 360deg);
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}

HTML

<div class="pattern"></div>

注：原示例中动画关键帧存在笔误，第二个关键帧的百分比已修正为100%（原代码重复写为0%）。

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