侧边栏渐变从左到右但也向下

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>

侧边栏渐变从左到右但也向下

Sidebar gradient left to right but also down

html

css

gradient

sidebar

colors