如何对齐两个线性渐变？

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

如何对齐两个线性渐变？

How do I align two linear gradients?

html

css

alignment

linear-gradients

responsive