边框左侧渐变

Question

这是我的CSS代码：

width: 0;
height: 0;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
border-left: 31px solid #0caa3f;

是否可以让border-left具有渐变效果？

- Вълко Калъчев

Answer 1

示例： http://jsfiddle.net/abhitalks/fg7Ex/3/

#grad {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 32px;
  left: 32px;
  clip: rect(auto 30px 60px auto);
}

#grad:after {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, .7);
  top: 8px;
  bottom: 8px;
  left: 8px;
  right: 8px;
  -webkit-transform: rotate(-45deg);
  background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(.75, #52882d), color-stop(0, #eee));
  border: 1px solid #fff;
}

<div id="grad"></div>

不要脸地从这里摘录: https://gist.github.com/distilledhype/582201

该代码段与IT技术有关，用于引用外部链接。

- Abhitalks

---

+1 看起来你是唯一一个读过这个问题的人。 - vals

Answer 2

这里是 Jsfiddle 演示

由于只支持 Chrome 和 Firefox，因此没有跨浏览器的 CSS 解决方案。因此，我建议使用 div 作为父元素，并将其分配给 CSS：

.gradient {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(173, 14, 173)), color-stop(0.67, rgb(255, 0, 255)));
    background-image: -moz-linear-gradient(center bottom, rgb(173, 14, 173) 33%, rgb(255, 0, 255) 67%);
    padding: 2px;
}
.gradient > div {
    background: #fff;
}

这里是HTML：

<div class="gradient">
    <div>text in div</div>
</div>

- Zaheer Ahmed

Answer 3

如何在div的伪元素上使用盒子阴影。类似于：FIDDLE。

div:before
{
    content: '';
    display: block;
    height: 60px;
    width: 3px;
    box-shadow: -3px 2px 2px 0 rgba(0,0,0,.5);
    left: -30px;
    top: -31px;
    position: relative;
}

- Danield

Answer 4

您可以在stackoverflow上查看相同类型的问题以获取解决方案右边框渐变

- Madhavi Balan

Answer 5

--color:#777;

margin:0 1%;
padding:0 5%;
background:linear-gradient(to right, transparent, var(--color) 5%, transparent 5%, transparent 95%, var(--color) 95%, transparent);

- Fabio