css - 边框左渐变

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