CODEWITHSUNDEEP
csscss-transformscss-shapes
Wayne
Wayne

Reputation: 363

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?

Upvotes: 10

Views: 49419

Answers (5)

Ana
Ana

Reputation: 37169

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>

Upvotes: 8

Owen
Owen

Reputation: 164

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>

Upvotes: 13

xaddict
xaddict

Reputation: 1328

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

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

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/

Upvotes: 2

James Wright
James Wright

Reputation: 3010

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

Upvotes: 10

Related Questions