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 wa

Answer 1

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

Answer 2

Have you checked the css transform scaleY? With another element around the arrow (or perhaps with a pseudo element) it enables you to rescale the result.

transform: scaleY(0.5)

Example:

http://jsfiddle.net/xaddict/hJyrU/ (webkit-only example)

EDIT: added translateZ(0) to force GPU rendering in webkit (anti-aliased borders, mhmmmm!)

Answer 3

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/

Answer 4

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");
});