CSS Arrow with Gradient

Question

I am trying to draw a left side arrow that has a gradient. Here is the code I am using, however I don't understand why it doesn't work.

  .left-arrow{
  position: relative;
  &:after{
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0; 
    position: absolute;
    pointer-events: none;
    border-color: rgba(51, 51, 51, 0);
    border-right-color: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(115,9,9,1)), color-stop(100%, rgba(236,0,0,1)));
    border-right-color: -webkit-linear-gradient(top, rgba(115,9,9,1) 0%, rgba(236,0,0,1) 100%);
    border-right-color: linear-gradient(to bottom, rgba(115,9,9,1) 0%, rgba(236,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#730909', endColorstr='#ec0000', GradientType=0 );
    border-width: 50px 20px 50px 0;
    margin-top: -50px;
  }
}

Here is en example. I just wish to add gradient to that arrow on the left. http://jsfiddle.net/6zWB3/2/

Answer 1

There are several techniques that can give you this result. In a future, probably the best one would be clipping. You could also go to border images, but right now the support is also weak for gradient images.

In the meanwhile, you can get this to work in all modern browser with transforms, and adjusting the result a little bit by hand

CSS

.left-arrow:after {
  left: -18px;
  top: 40px;
  content: " ";
  height: 36px;
  width: 65px;
  position: absolute;
  pointer-events: none;
  background: linear-gradient(-32deg, #ec0000 0%, #730909 100%);
  -webkit-transform: rotate(74deg) skewX(56deg);
  -webkit-transform-origin: left bottom;
  transform: rotate(74deg) skewX(56deg);
  transform-origin: left bottom;
}

demo

Answer 2

As far as I am aware, you cannot apply gradients to a border directly... Newer versions of webkit support gradients as a border-image (http://css-tricks.com/examples/GradientBorder/), but you may have difficulties trying to get that technique working with css shapes like this.

You could perhaps try using CSS Masking to layer a gradient over top of your arrow shape, though my experience with these techniques is too limited to confirm wether this would work or not. (http://www.html5rocks.com/en/tutorials/masking/adobe/)

Answer 3

If you try:

SELECTOR {
    border-left: 9px solid #ff00ff;
    border-right: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

This will produce a nice bright pink arrow for you.