CSS右下边框渐变为透明

Question

标题说明了一切，

我需要设置一个从下到上透明但仅在右侧的黑色边框。

这段代码部分完全符合我的需要，但我不知道如何让它在左侧消失，所以只有右侧有边框..

.bottom-to-top {
border-width: 3px;
border-style: solid;
-webkit-border-image: 
  -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
  -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
  -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
-o-border-image:
  -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
  linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;}

Answer 1

只需将 border-width: 3px; 更改为 border-width: 0 3px 0 0; 您正在设置所有边的边框

.bottom-to-top {
  width: 200px;
  height: 100px;
  border-width: 0 3px 0 0;
  border-style: solid;
  -webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
  -webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  -moz-border-image: -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  -o-border-image: -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
}

<div class="bottom-to-top"></div>

Answer 2

您可以使用 :after :pseudo-element 来执行此操作。

.bottom-to-top {
  position: relative;
  width: 200px;
  height: 50px;
}
.bottom-to-top:after {
  position: absolute;
  right: 0;
  content: '';
  height: 100%;
  width: 3px;
  background: linear-gradient(to top, black, transparent);
}

<div class="bottom-to-top"></div>