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

Answer 3

Here is Jsfiddle Demo

There is no cross-browser css solution as it only supports chrome and firefox. So I recommend using div as parent and assigning it 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;
}

here is html:

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

Answer 4

How about using a box-shadow on a pseudo element of the div. Something like

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;
}

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);