时间戳

首页 > 解决方案 > 如何对齐两个线性渐变？

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

问题描述

我有两个线性渐变，一个在另一个下方，我想让它们对齐并在所有屏幕尺寸上保持对齐。

这就是我想要的样子

这就是我想要的样子

（所以你知道我说“对齐​​”是什么意思

正如我目前拥有的那样，我可以通过输入特定的百分比来对齐它们，但在任何其他屏幕上，两个渐变都将不对齐

像这样.

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

我四处寻找答案，但无法找到任何针对此特定案例的信息，因此我们将不胜感激。

标签： htmlcssalignmentresponsivelinear-gradients

解决方案

调整一下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;
}

推荐阅读