Dynamically create an arrow with a gradient

Question

How could one go about dynamically generating a shape like this in CSS3:

enter image description here

Ignore the borders, as the important aspects are:

- The gradient in the arrow body, and that the gradient lasts from the tip to the end of the arrow.
- The length of the square part will vary.

I tried the regular :after method of adding a triangle to the end of a div element, but I couldn’t get the gradient to span both the tip and the body properly.

Fiddle: http://jsfiddle.net/rtuY9/8/

Zoltan Toth · Accepted Answer · 2012-12-14 22:12:51Z

3

You can try something like this - DEMO

div {
    width: 50px;
    height: 100px;
    position: relative;
    margin: 100px;

    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 100%);
    background:    -moz-linear-gradient(top, #1e5799 0%, #2989d8 100%);
}

div:after {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    left: -125px;
    top: -51px;
    margin: 100px;
    height: 100px;
    width: 100px;
    background: #c00;

    -webkit-transform:rotate( -45deg );
       -moz-transform:rotate( -45deg );
            transform:rotate( -45deg );

    background: -webkit-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #ffffff 50%, #ffffff 100%);
    background:    -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #ffffff 50%, #ffffff 100%);
}

answered Dec 14, 2012 at 22:12

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

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

1 Comment

KMN Over a year ago

Thanks for your reply. Its not exactly what I was after, but it is a good compromise. Thanks.

Collectives™ on Stack Overflow

Dynamically create an arrow with a gradient

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related