梯度以适应不同的div大小

Question

我有一个梯度，我想从左边开始，它的端点可以保持原样。

下面是我当前的测试场景：

​

.test-1{
  height: 200px;
  border: 1px solid red;
}

.test-2{
  height: 400px;
  border: 1px solid blue;
}
.test-3{
  height: 500px;
  border: 1px solid red;
}
.test-4{
  height: 600px;
  border: 1px solid blue;
}

.gradient{
    /* height: 100%;
    width: 100%; */
    padding: 0;
    margin: 0;
    background: 
      linear-gradient(190deg, #FFFFFF 22%, transparent 22.1%), 
      linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
}

<div class="test-1 gradient"></div>

<div class="test-2 gradient"></div>

<div class="test-3 gradient"></div>

<div class="test-4 gradient"></div>

​

• 在.test-1中，div太小，所以它的梯度在顶部被切断。在这种情况下，我希望它结束在左上角，这样它就不会看起来像突然结束。
• .test-2是一样的。
• .test-3很好，它不会突然结束。
• .test-4也很好，它不是在左上角，但它没有被切断。

我怎样才能满足这个梯度以适应不同的div大小？

Answer 1

您可以调整顶部的坡度，使其成为三角形：

​

.test-1{
  height: 80vh;
  border: 1px solid red;
  background: 
    /*                                                   position /width height */
    linear-gradient(to bottom left,#fff 49.5%,transparent 50%) top/100%  30%     no-repeat,
    linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
}

<div class="test-1 gradient"></div>

​

如果你想在顶部有更多的空间，加入一些填充物

​

.test-1{
  height: 80vh;
  border: 1px solid red;
  padding-top: 10vh;
  background: 
      linear-gradient(to bottom left,#fff 49.5%,transparent 50%) top/100% 30% no-repeat,
      linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%) no-repeat;
  background-origin:content-box;
}

<div class="test-1 gradient"></div>

​

或在渐变中添加偏移量：

​

.test-1{
  height: 80vh;
  border: 1px solid red;
  background: 
      linear-gradient(to bottom left,#fff 49.5%,transparent 50%)left 0 top 20px/100% 30% no-repeat,
      linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%) left 0 top 20px no-repeat;
}

<div class="test-1 gradient"></div>

​

另一个想法是考虑斜变换。

​

.test-1{
  height: 80vh;
  border: 1px solid red;
  position:relative;
  overflow:hidden;
  z-index:0;
}
.test-1:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:20px; /* Control the space */
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
  transform:skewY(8deg);
  transform-origin:left;
}

<div class="test-1 gradient"></div>

​

Answer 2

在梯度中可以使用vh代替%

​

.test-1{
  height: 200px;
  border: 1px solid red;
}

.test-2{
  height: 400px;
  border: 1px solid blue;
}
.test-3{
  height: 500px;
  border: 1px solid red;
}
.test-4{
  height: 600px;
  border: 1px solid blue;
}

.gradient{
    /* height: 100%;
    width: 100%; */
    padding: 0;
    margin: 0;
   background: 
       linear-gradient(190deg, #FFFFFF 60vh, transparent 34.1vh), 
       linear-gradient(90deg, #5c9c9b 0, #8ccdcc 100vh);
}

<div class="test-1 gradient"></div>

<div class="test-2 gradient"></div>

<div class="test-3 gradient"></div>

<div class="test-4 gradient"></div>

​