Создайте треугольник CSS3 с линейным градиентом ⇐ CSS

[Anonymous]

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?


Источник: https://stackoverflow.com/questions/105 ... r-gradient