Make CSS3 triangle with linear gradient

Question

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 1

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/

Solution 2

So I know that you want to do this with CSS, but I always do this in SVG:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="fill" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(224,224,224);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
</linearGradient>
</defs>

<path d="M 0 0 L 64 0 L 32 64 z" stroke="colourname" fill="url(#fill)"/>

</svg>

You can embed it as so:

<img src="triangle.svg" alt="Triangle" class="triangle" />

You could also make the toggle image in the same way, and toggle it using JavaScript or jQuery:

$(".triangle").click(function()
{
    if($(this).attr("src") == "triangle.svg")
        $(this).attr("src", "triangledown.svg");

    else $(this).attr("src", "triangle.svg");
});

Solution 3

Yes, it can be done using only CSS gradients. You just have to put three gradients on top of the other (keep in mind that the first one you list is the one on top). The one at the bottom (last one listed) is your vertical gradient. On top of it, you have two gradients which also make use of color stops.

Something like this:

background: linear-gradient(30deg, transparent 37%, #fff 37%), 
            linear-gradient(-30deg, transparent 37%, #fff 37%), 
            linear-gradient(to bottom, #ccc, #000);

I've made a little demo that can be seen at: http://dabblet.com/gist/2705739

Solution 4

Just use clip-path with background-image

 .triangle {
    background-image: linear-gradient(rgba(#999, 0.4), rgba(#ccc, 0.5));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    width: 100px;
    height: 100px;
 }

View more solutions