Border left gradient

Question

That is my css:

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

Is it possible to make border-left have a gradient?

Answer 1

Demo: 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>

Shamelessly picked up from here: https://gist.github.com/distilledhype/582201

Answer 2

You can check the same kind of question in stackoverflow for solution right border gradient