侧边栏渐变从左到右但也向下[关闭]答案

【问题标题】：Sidebar gradient left to right but also down [closed]侧边栏渐变从左到右但也向下[关闭]
【发布时间】：2020-04-03 22:16:14
【问题描述】：

我必须创建一个侧边栏，它具有从左到右的渐变效果，这很好，但它也会在到达底部时垂直淡出。关于如何实现这一目标的任何想法？环顾四周，但找不到解决方案。谢谢

【问题讨论】：

请向我们展示您到目前为止所做的尝试
你的意思是对角渐变吗？

标签： html css colors gradient sidebar

【解决方案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>

【讨论】：

是的，这很好用，从来没有听说过这样的方法。非常感谢！