Search code examples
csscss-transformscss-shapes

Make CSS3 triangle with linear gradient

I need to create button with triangle on one side (like this http://css-tricks.com/triangle-breadcrumbs/) with linear vertical gradient and border, and I want to use pure CSS3. It's ok if I need 45deg "triangle", I just write smth like this

.button:after {
    -webkit-transform: rotate(45deg);
    background: -webkit-linear-gradient(-45deg, #fff, #000);
    content: '';
    width: 2em;
    height: 2em;
    display: block;
}

and hide half of that pseudo-element under .button (so only another half of it is visible, like a triangle).

But if I need another angle (e.g. more steep) - I can't make it with standart XY rotate and scale. I can use e.g. 2 divs, one for top half of triangle and one for bottom, but there might be a problem with border and gradient.

Maybe it's possible to do that with multiple gradients with color stops?

Solution

  • I hope this will help you i have made gradient triangle with only one div with pure css.

    http://jsfiddle.net/NDJ3S/15/

    UPDATED

    Check it now its working :- http://jsfiddle.net/NDJ3S/17/