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 wa

Answer 1

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