Geek Answers Handbook

Make CSS3 triangle with linear gradient

I need to create a button with a triangle on one side (e.g. http://css-tricks.com/triangle-breadcrumbs/ ) with a linear vertical gradient and border, and I want to use pure CSS3. It's ok if I need a 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 this pseudo-element under .button (so that only the other half of it is visible as a triangle).

But if I need a different angle (for example, a steeper one) - I cannot make it standard XY to rotate and scale. I can use for example. 2 divs, one for the top half of the triangle and one for the bottom, but there may be a problem with the border and gradient.

Is it possible to do this with multiple gradients with color stops?

+6
source share
4 answers

Hope this helps you, I made a gradient triangle with just one div with pure css.

http://jsfiddle.net/NDJ3S/15/

UPDATED

Now check its work: http://jsfiddle.net/NDJ3S/17/

+3
source

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 insert it like this:

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

You can also make the switch image the same way and switch 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"); });
+6
source

Yes, this can be done using only CSS gradients. You just need to overlay three gradients on top of the other (keep in mind that the first list you list is on top). The one below (the last one listed) is your vertical gradient. In addition, you have two gradients that also use color stops.

Something like that:

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

I did a small demo, which can be seen at: http://dabblet.com/gist/2705739

+5
source

Have you checked the css transformY scale? Using another element around the arrow (or possibly with a pseudo-element), it allows you to scale the result.

 transform: scaleY(0.5)

Example:

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

EDIT: added translateZ(0) to force the rendering of a graphic in webkit (smooth edges, mhmmmm!)

0
source

More articles:


All Articles