Make CSS3 triangle with linear gradient

by

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="https://stackoverflow.com/questions/10580226/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") == "https://stackoverflow.com/questions/10580226/triangle.svg")
        $(this).attr("src", "triangledown.svg");

    else $(this).attr("src", "https://stackoverflow.com/questions/10580226/triangle.svg");
});

Leave a Comment