css 从中间到角落旋转背景

Question

我想在 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 方法也可以。

提前致谢。

Answer 1

您可以使用 linear-gradient 轻松做到这一点。您需要其中两个，一个将创建一个方形来填充前 50%，第二个将创建一个三角形来填充剩余的 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*/
}

如果你不想要透明度，你可以像下面那样做：

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

Answer 2

您可以使用 css clip-path 属性并为其提供必要的填充规则。试试下面的代码片段：

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

.container {
  height: 100vh;
  background: #297fca;
  clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%);
}

<div class="container"></div>

css 从中间到角落旋转背景

css rotate background from middle to corner

css

background-color

css-transforms