html - 如何对齐两个线性渐变？

Question

我有两个线性渐变，一个在另一个下面，我想让它们在所有屏幕尺寸上对齐并保持对齐。
这就是我想要的样子

(所以你知道我说“对齐​​”是什么意思
正如我目前所拥有的，我可以通过输入特定的百分比来对齐它们，但在任何其他屏幕上，这两个渐变将不对齐
.

    <div style="background-image: linear-gradient(110deg, #0085CA 54%, #e3e3e3 54%); height: 50vh;"></div>
    <div style="background-image: linear-gradient(110deg, #ffffff 45%, #000 45%); height: 50vh;"></div>

我环顾四周寻找答案，但一直无法找到有关此特定情况的任何信息，因此将不胜感激。

Answer 1

调整 background-size这会很容易。诀窍是使梯度等于元素大小的两倍，因此等于两个元素的大小。然后你把一个放在顶部，另一个放在底部

.box {
  height: 50vh;
  background-image: linear-gradient(110deg, #0085CA 50%, #e3e3e3 50%);
  background-position: top;
  background-size: 100% 200%;
}

.box + .box {
  background-image: linear-gradient(110deg, #ffffff 50%, #000 50%);
  background-position: bottom;
}

body {
  margin: 0;
}

<div class="box"></div>
<div class="box"></div>

您也可以在没有 html 元素而只有 CSS 的情况下生成渐变:

html::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height: 50vh;
  padding-bottom:50vh;
  background: 
     linear-gradient(110deg, #0085CA 50%, #e3e3e3 50%) padding-box content-box,
     linear-gradient(110deg, #ffffff 50%, #000    50%);
}

另一个想法:

html::before {
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  left:-100%;
  right:-100%;
  background: 
     linear-gradient(#e3e3e3 50%,#000    0) right/50% 100% no-repeat,
     linear-gradient(#0085CA 50%,#ffffff 0);
  transform:skew(-20deg); /* 20 = 110 - 90 */
}

另一个具有更复杂语法的乐趣:

html{
  --s:calc(50vh * 0.363); /* this will control the  angle. 0.363 = tan(20deg)*/
  
  min-height:100%;
  background: 
     linear-gradient(to bottom right,#0085CA 50%,transparent 50.5%) calc(50% + var(--s)/2) 0,
     linear-gradient(to right, #0085CA 50.1%,#e3e3e3 0) top,
     linear-gradient(to top left    ,#000    50%,transparent 50.5%) calc(50% - var(--s)/2) 100%,
     linear-gradient(to right, #ffffff 49.9%, #000   0) bottom;
  background-size:var(--s) 50%,100% 50%;
  background-repeat:no-repeat;
}