gpt4 book ai didi

css 旋转背景从中间到 Angular 落

转载 作者:行者123 更新时间:2023-11-28 09:16:07 25 4
gpt4 key购买 nike

我想在 CSS 中实现这个,对所有屏幕尺寸都有效: example

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

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

提前致谢。

最佳答案

您可以使用线性渐变轻松做到这一点。您需要其中两个,一个将创建一个方形来填充前 50%,第二个将创建三 Angular 形以填充剩余的 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;
}

关于css 旋转背景从中间到 Angular 落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49500998/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com