侧边栏从左到右也从下到上渐变

Question

我必须创建一个侧边栏，该边栏具有从左到右的渐变效果，但是随着到达底部，它也会垂直消失。关于如何实现这一点的任何想法？环顾四周，但找不到解决方案。谢谢

Answer 1

您可以将渐变与mask

结合使用

.box {
  width:100px;
  height:200px;
  background:linear-gradient(to right,red,blue);
  -webkit-mask-image:linear-gradient(white,transparent);  
  mask-image:linear-gradient(white,transparent);   
}

<div class="box">

</div>

如果需要第三种颜色，请像下面这样

：

.box {
  width:100px;
  height:200px;
  position:relative;
  z-index:0;
  background-color:green;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,red,blue);
  -webkit-mask-image:linear-gradient(white,transparent);  
  mask-image:linear-gradient(white,transparent); 
}

<div class="box">

</div>