CSS从中间旋转背景到角落(css rotate background from middle to corner)

我想在CSS中实现这一点，适用于所有屏幕尺寸：

从左侧到屏幕中间，背景应该是蓝色的，从中上到右下角的背景应该是白色的。这是我已经得到的：

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

提前致谢。

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:

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.

最满意答案

您可以使用线性渐变轻松完成此操作。你需要其中两个，一个将创建一个正方形形状来填充前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*/
} 
  
 
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:
  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;
} 
  
 
 
With an easier syntax: 
 
 
  
  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*/
}

更多推荐