css从中间到角落旋转背景

我想在CSS中实现这一点,对所有屏幕尺寸都有效：

从屏幕的左侧到中间,背景应为蓝色,从上中间到右下角,背景应为白色.
这就是我已经得到的：

<style>
.wrapper {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #297fca;
}
.right {
    position: fixed;
    z-index: 2;
    top: -70%;
    right: -50%;
    background: #fff;
    width: 100%;
    height: 100%;
    transform: translateY(50%) rotate(45deg);
  }
</style>
...
 <div class="wrapper">
    <div class="right">
    </div>

  </div>

这适用于某些屏幕尺寸,但不是一般解决方案.
我正在寻找一个只有CSS的解决方案.如果这不可能,SVG apporach也可以.

提前致谢.

您可以使用线性渐变轻松完成此操作.你需要其中两个,一个将创建一个正方形形状来填充前50％,第二个将创建三角形形状以填充剩余的50％.

body {
  margin:0;
  height:100vh;
  background:
  linear-gradient(#297fca,#297fca) 0 0/50% 100% no-repeat,
  linear-gradient(to bottom left,transparent 49.8%,#297fca 50%)100% 100%/50.5% 100% no-repeat;
}

使用更简单的语法：

body {
  margin:0;
  height:100vh;
  background-image:
   linear-gradient(#297fca,#297fca),
   linear-gradient(to bottom left,transparent 49.8%,#297fca 50%);
  background-repeat:no-repeat;
  background-size:50.1% 100%; /* both gradient will fill 50% width and 100% height*/
  background-position:
    left, /* The first one placed on the left*/
    right /* The second one placed on the right*/
}