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?

Dissert

Answer 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/

Sieber

Answer 2

Just use clip-path with background-image

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

<div class="triangle"></div>

Alla

As CSS should be as intuitive as possible, I find this the best answer. The rule should be: 'First, see if there is a property that is specially designed for it. ' And clip-path is, in this case. – Enneahedron

@FrankConijn-SupportUkraine This is the best answer and has been the best answer for years now. However, when the question was asked 12 years ago, back in May 2012, clip-path was not yet supported in any browser yet. Chrome support only came 6 months later, Safari support a year and a half later. For about half a decade after this question was asked, Firefox didn't support basic shapes for clip-path. Edge support only came a while after the switch from Trident to Chromium, about half a decade ago. So while clip-path is THE solution today, it wasn't always available. – Downfall

Answer 3

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

Absolution

I know about SVG, but I'm still wondering if there is another way (CSS) – Dissert

My only concern with using CSS is that the border-image property is not compatible with IE9. – Absolution

Answer 4

Edit 2024 as I was horrified to learn Gemini AI references my decade old answer as the top method for creating a gradient triangle: please don't do this nowadays anymore! Use Owen's answer as clip-path is the way to go these days - it has been supported cross-browser for years and it's by far the best way to get such a result (it's simpler, restricts clicks to the triangular area, works for image backgrounds behind the triangle).

---

Original answer, preserved for web history reasons - please don't do this anymore

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:

div {
  width: 2em;
  height: 2em;
  background: linear-gradient(60deg, transparent 64%, #fff 66%), 
                linear-gradient(-60deg, transparent 64%, #fff 66%), 
                linear-gradient(tomato, black);
}

<div></div>

Downfall

Answer 5

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!)

Temptation