css rotate background from middle to corner

Question

I want to achieve this in CSS, valid for all screen sizes:

From the left side to the middle of my screen the background should be blue, from the upper middle to the right bottom corner the background should be white. This is what I got already:

<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>

This is working for some screen sizes but not a general solution. I'm looking for a CSS only solution. If this isn't possible a SVG apporach is ok too.

Thanks in advance.

Answer 1

You can easily do this with linear-gradient. You need two of them, one will create a square shape to fill the first 50% and the second one will create the triangle shape to fill the remaining 50%.

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*/
}

If you don't want transparency you can do it like below:

body {
  margin:0;
  height:100vh;
  background:
   linear-gradient(to top right,transparent 49.8%,#fff 50%) 
    right -1px top 0
    /50% 100% 
    no-repeat,
   #297fca;
}