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/

vals · Accepted Answer · 2014-03-02 08:53:29Z

2

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

answered Mar 2, 2014 at 8:53

vals

64k11 gold badges96 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bagzli Over a year ago

Thank you, I was actually able to reproduce this with different code but i'm encountering bugs. Here is an example of what I found: dabblet.com/gist/4639593

Blake Mann · Accepted Answer · 2014-03-01 23:18:31Z

0

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

answered Mar 1, 2014 at 23:18

Blake Mann

5,53026 silver badges39 bronze badges

1 Comment

Bagzli Over a year ago

Tried with the border example, didn't really work out. I'll look into clipping example but I'm not overly enthusiastic because I need my arrow to overlap, and with borders it was no issue. I'm not sure how clipping will handle it. Thank you either way.

Ryan Castle · Accepted Answer · 2014-03-01 23:23:15Z

0

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.

answered Mar 1, 2014 at 23:23

Ryan Castle

2671 gold badge3 silver badges12 bronze badges

6 Comments

Bagzli Over a year ago

I Don't want a bright pink arrow. I'd like an arrow with gradient. I already produced myself a nice bright red arrow. But if it doesn't have gradient then its going to look very bad on the site.

Bagzli Over a year ago

That is exactly it, just got to figure out how to convert it to left arrow as opposed top top left.

Ryan Castle Over a year ago

If you add: -webkit-transform: rotate(-45deg); to the CSS, it will rotate the arrow around, you will just need to reposition it.

Bagzli Over a year ago

I tried that, it completely breaks it, if I try to rotate it in any way, the arrow gets broken entirely.

Ryan Castle Over a year ago

Hmm, what is the full CSS that you're using for your arrow?

|

Collectives™ on Stack Overflow

CSS Arrow with Gradient

3 Answers 3

demo

1 Comment

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related