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

Мне нужно создать кнопку с треугольником на одной стороне (например, http://css-tricks.com/triangle-breadcrumbs/) с линейным вертикальным градиентом и границы, и я хочу использовать чистый CSS3. Это нормально, если мне нужен 45-градусный «треугольник», я просто пишу что-то вроде этого

.button:after {
    -webkit-transform: rotate(45deg);
    background: -webkit-linear-gradient(-45deg, #fff, #000);
    content: '';
    width: 2em;
    height: 2em;
    display: block;
}

и прячу половину этого псевдоэлемента под .button (так что видна только другая его половина, как треугольник).

Но если мне нужен другой угол (например, более крутой) - я не могу сделать это со стандартным вращением и масштабированием XY. Я могу использовать, например. 2 div, один для верхней половины треугольника и один для нижней, но может быть проблема с границей и градиентом.

Возможно, это можно сделать с помощью нескольких градиентов с цветовыми точками?